Function Components

:::warning We’re still working on function components and Hooks. They’re not quite ready to be used yet. If you’d like to help out, take a look at the project board for a list of things that still need to be done. :::

Function components are a simplified version of normal components. They consist of a single function that receives props and determines what should be rendered by returning Html. Basically, it’s a component that’s been reduced to just the view method. On its own that would be quite limiting because you can only create pure components, but that’s where Hooks come in. Hooks allow function components to use state and other Yew features without implementing the Component trait.

Creating function components

The easiest way to create a function component is to add the #[function_component] attribute to a function.


#![allow(unused)]
fn main() {
#[function_component(HelloWorld)]
fn hello_world() -> Html {
    html! { "Hello world" }
}
}

Under the hood

Function components consists of two parts. First, the FunctionProvider trait which is comparable to the Component trait but it only has a single method called run. The second part is the FunctionComponent struct which wraps around the FunctionProvider type and turns it into an actual Component. The #[function_component] attribute essentially just implements FunctionProvider for you and exposes it wrapped in FunctionComponent.

Hooks

Hooks are simply functions that let you “hook into” components’ state and/or lifecycle and perform actions. Yew comes with a few pre-defined Hooks. You can also create your own.

Pre-defined Hooks

Yew comes with the following predefined Hooks:

Custom Hooks

There are cases where you want to define your own Hooks for reasons. Yew allows you to define your own Hooks which lets you extract your potentially stateful logic from the component into reusable functions. See the Defining custom hooks section for more information.