Custom Hooks

Defining custom Hooks

Component’s stateful logic can be extracted into usable function by creating custom Hooks.

Consider that we have a component which subscribes to an agent and displays the messages sent to it.

  1. use yew::{function_component, html, use_effect, use_state, Callback};
  2. use yew_agent::Bridged;
  3. // EventBus is an implementation yew_agent::Agent
  4. use website_test::agents::EventBus;
  7. #[function_component(ShowMessages)]
  8. pub fn show_messages() -> Html {
  9.     let state = use_state(Vec::new);
  11.     {
  12.         let state = state.clone();
  13.         use_effect(move || {
  14.             let producer = EventBus::bridge(Callback::from(move |msg| {
  15.                 let mut messages = (*state).clone();
  16.                 messages.push(msg);
  17.                 state.set(messages)
  18.             }));
  20.             || drop(producer)
  21.         });
  22.     }
  24.     let output = state.iter().map(|it| html! { <p>{ it }</p> });
  25.     html! { <div>{ for output }</div> }
  26. }

There’s one problem with this code: the logic can’t be reused by another component. If we build another component which keeps track of the messages, instead of copying the code we can move the logic into a custom hook.

We’ll start by creating a new function called use_subscribe. The use_ prefix conventionally denotes that a function is a hook. This function will take no arguments and return Rc<RefCell<Vec<String>>>.

  1. use std::{cell::RefCell, rc::Rc};
  3. fn use_subscribe() -> Rc<RefCell<Vec<String>>> {
  4.     todo!()
  5. }

This is a simple hook which can be created by combining other hooks. For this example, we’ll two pre-defined hooks. We’ll use use_state hook to store the Vec for messages, so they persist between component re-renders. We’ll also use use_effect to subscribe to the EventBus Agent so the subscription can be tied to component’s lifecycle.

  1. use std::collections::HashSet;
  2. use yew::{use_effect, use_state, Callback};
  3. use yew_agent::Bridged;
  4. // EventBus is an implementation yew_agent::Agent
  5. use website_test::agents::EventBus;
  7. fn use_subscribe() -> Vec<String> {
  8.     let state = use_state(Vec::new);
  10.     let effect_state = state.clone();
  12.     use_effect(move || {
  13.         let producer = EventBus::bridge(Callback::from(move |msg| {
  14.             let mut messages = (*effect_state).clone();
  15.             messages.push(msg);
  16.             effect_state.set(messages)
  17.         }));
  18.         || drop(producer)
  19.     });
  21.     (*state).clone()
  22. }

Although this approach works in almost all cases, it can’t be used to write primitive hooks like the pre-defined hooks we’ve been using already

Writing primitive hooks

use_hook function is used to write such hooks. View the docs on docs.rs for the documentation and hooks directory to see implementations of pre-defined hooks.