Function Components

Let's revisit this previous statement:

Yew centrally operates on the idea of keeping everything that a reusable piece of UI may need in one place - rust files.

We will refine this statement, by introducing the concept that will define the logic and presentation behavior of an application: "components".

What are Components?#

Components are the building blocks of Yew.

They:

• Take arguments in form of Props
• Can have their own state
• Compute pieces of HTML visible to the user (DOM)

Two flavors of Yew Components#

You are currently reading about function components - the recommended way to write components when starting with Yew and when writing simple presentation logic.

There is a more advanced, but less accessible, way to write components - Struct components. They allow very detailed control, though you will not need that level of detail most of the time.

Creating function components#

To create a function component add the #[component] attribute to a function. By convention, the function is named in PascalCase, like all components, to contrast its use to normal html elements inside the html! macro.

use yew::{component, html, Html};

#[component]
fn HelloWorld() -> Html {
    html! { "Hello world" }
}

// Then somewhere else you can use the component inside `html!`
#[component]
fn App() -> Html {
    html! { <HelloWorld /> }
}

What happens to components#

When rendering, Yew will build a virtual tree of these components. It will call the view function of each (function) component to compute a virtual version (VDOM) of the DOM that you as the library user see as the Html type. For the previous example, this would look like this:

<App>
    <HelloWorld>
        <p>"Hello world"</p>
    </HelloWorld>
</App>

When an update is necessary, Yew will again call the view function and reconcile the new virtual DOM with its previous version and only propagate the new/changed/necessary parts to the actual DOM. This is what we call rendering.