mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
6f4cdf2802
* Add use_effect_with * Fix doc * Add NeverEq * Save as deps-and-runner * remove with_deps * fix other use_effect_with_deps * add migration guide * fix website * fix doc test * return use_effect_base * fix docs * fmt * fix doc tests * noeq * use_callback * finsihing touches * fmt * nighly fmt * fix mistake --------- Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>
52 lines
1.8 KiB
Plaintext
52 lines
1.8 KiB
Plaintext
---
|
|
title: 'Hooks'
|
|
slug: /concepts/function-components/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](/community/awesome#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](../../suspense.mdx)
|
|
|
|
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`
|
|
- `use_context`
|
|
- `use_force_update`
|
|
|
|
The documentation for these hooks can be found in the [Yew API docs](https://yew-rs-api.web.app/next/yew/functional/)
|
|
|
|
### 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](concepts/function-components/hooks/custom-hooks.mdx#defining-custom-hooks) section for more information.
|
|
|
|
## Further reading
|
|
|
|
- The React documentation has a section on [React hooks](https://reactjs.org/docs/hooks-intro.html).
|
|
These are not the same as Yew's hooks, but the underlying concept is similar.
|