Hooks

Hooks#

Hooks are functions that let you store state and perform side effects.

Yew comes with a few pre-defined hooks. You can also create your own or discover many community-made hooks.

Rules of hooks#

1. A hook function name always has to start with use_

2. Hooks can only be used in the following locations:

   • Top-level of a function/hook.
   • Blocks inside a function/hook, given it is not already branched.
   • In the condition of a top-level if expression inside a function/hook.
   • In the scrutinee of a top-level match expression inside a function/hook.
3. Hooks must be called in the same order for every render. Returning early is only allowed when using Suspense

These rules are enforced by either compile-time or run-time errors.

Pre-defined Hooks#

Yew comes with the following predefined Hooks:

• use_state
• use_state_eq
• use_memo
• use_callback
• use_ref
• use_mut_ref
• use_node_ref
• use_reducer
• use_reducer_eq
• use_effect
• use_effect_with
• use_context
• use_force_update

The documentation for these hooks can be found in the Yew API docs

Custom Hooks#

There are cases where you want to define your own Hooks to encapsulate potentially stateful logic from a component into reusable functions. See the Defining custom hooks section for more information.

Further reading#

• The React documentation has a section on React hooks. These are not the same as Yew's hooks, but the underlying concept is similar.