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
- A hook function name always has to start with
use_
- Hooks can only be used in the following locations:
- Top level of a function / hook.
- Blocks inside a function / hook, given it's 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.
- 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_mut_ref
use_node_ref
use_reducer
use_reducer_eq
use_effect
use_effect_with_deps
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 exactly the same as Yew's hooks, but the underlying concept is similar.