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.

  1. use yew::{Properties, function_component, Html, html};
  3. #[derive(Properties, PartialEq)]
  4. pub struct Props {
  5.     pub is_loading: bool,
  6. }
  8. #[function_component]
  9. fn HelloWorld(props: &Props) -> Html {
  10.     if props.is_loading {
  11.         html! { "Loading" }
  12.     } else {
  13.         html! { "Hello world" }
  14.     }
  15. }

Pure Components - 图1note

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