Pure Components

A function component is considered pure when the returned Html is deterministically derived from its props, and its view function mutates no state or has other side-effects.

For example below is a pure component. For a given prop is_loading it will always result in the same Html without any side effects.

use yew::{Properties, function_component, Html, html};

#[derive(Properties, PartialEq)]
pub struct Props {
    pub is_loading: bool,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {
    if props.is_loading {
        html! { "Loading" }
    } else {
        html! { "Hello world" }
    }
}

備註

If you have an internal pure component that makes no use of hooks and other component machinery, you can often write it instead as a normal function returning Html and avoid a bit of overhead for Yew, related to running the component lifecycle. Use expression syntax to render them in html!.

Impure components

You might wonder if a component can be impure if it does not use any globals, since its just a function that is called every render. This is where the next topic comes in - hooks