Skip to content

Add Hook Cheat Sheet #553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add Hook Cheat Sheet #553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95267ae
Improve hook introduction
mcmah309 Aug 16, 2025
fb38069
Add hook cheat sheet
mcmah309 Aug 16, 2025
5edd440
Add use prefix notice to hook intro
mcmah309 Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs-src/0.7/src/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@
- [In-Depth](guides/depth/index.md)
- [Asset Pipeline](guides/depth/assets.md)
- [Custom Renderer](guides/depth/custom_renderer.md)
- [Hook Cheat Sheet](guides/hook_cheat_sheet.md)
- [Migration](migration/index.md)
- [To 0.7](migration/to_07.md)
- [To 0.6](migration/to_06.md)
Expand Down
4 changes: 2 additions & 2 deletions docs-src/0.7/src/essentials/basics/hooks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Hooks

In Dioxus, state that is local to a component is stored in *hooks*. Hooks provide a simple way for components to store and retrieve state while rendering.
A **hook** is a special function that lets a component "hook into" certain capabilities or lifecycle of the framework. Hooks are denoted with the `use_*` prefix. In Dioxus, state that is local to a component is stored in hooks. These hooks provide a simple way for components to store and retrieve state while rendering.

Dioxus hooks work similarly to React's hooks. If you haven't done much web development, hooks might seem particularly unusual. Hooks provide a way of storing state, attaching effects, and enabling composability that integrates well with the full Dioxus reactivity system. Even better - they're less verbose than declaring structs and implementing "render" traits!
Dioxus hooks work similarly to React's hooks - providing a way of storing state, attaching effects, and enabling composability that integrates well with the full Dioxus reactivity system.

## The `use_hook` primitive

Expand Down
118 changes: 118 additions & 0 deletions docs-src/0.7/src/guides/hook_cheat_sheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
# Hook Cheat Sheet

## Component Lifecycle Hooks

Useful hooks for reacting to the component lifecycle.

| Hook | Derived | Async | Sync | Returns Value | Pre-render | Render | Post-render | Effects First Render | Effects Subsequent Renders | On Unmount |
|------------------------------------------|----------|-------|------|---------------|------------|--------|-------------|----------------------|------------------------------|------------|
| [use_hook] | ❌ | ❌ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ |
| [use_hook_with_cleanup] | ❌ | ❌ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ |
| [use_hook_did_run] | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ |
| [use_signal] | ❌ | ❌ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_signal_sync] | ❌ | ❌ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_effect] | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ |
| [use_memo] | ✅ | ❌ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_reactive] | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_callback] | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_future] | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ |
| [use_coroutine] / [use_coroutine_handle] | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ |
| [use_channel] / [use_listen_channel] | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ |
| [use_resource] | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_before_render] | ❌ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ |
| [use_after_render] | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ |
| [use_drop] | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ |
| [use_server_future] | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ | ❌ |
| [use_server_cached] | ❌ | ❌ | ✅ | ❌ | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ |


### Context Hooks

Context hooks allow consuming and retrieving context in the component tree.

* [use_context_provider](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html)
* [use_context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context.html)
* [try_use_context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.try_use_context.html)
* [use_root_context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_root_context.html)

### Message Passing
Reactive message passing can be accomplished with both [use_coroutine]/[use_coroutine_handle] and [use_channel]/[use_listen_channel]. The difference is in ergonomics. For channels, the channel is passed around that one can send and listen on. For coroutines, only the send handle is passed around and the coroutine can be retrieved through the shared context.

### Hydration

[use_server_future] and [use_server_cached] are useful for hydration.

## Utility Hooks

Hooks into various utilities not necessarily related to reacting to the component lifecycle

### Collections

* [use_set_compare](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare.html)
* [use_set_compare_equal](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_set_compare_equal.html)

### Special Utilities

* [use_clipboard](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/clipboard/fn.use_clipboard.html)
* [use_window_size](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/window/fn.use_window_size.html)
* [use_geolocation](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/geolocation/use_geolocation/fn.use_geolocation.html)
* [use_system_theme](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/theme/fn.use_system_theme.html)

### Execution Time and Rate Limiting

* [use_debounce](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_debounce.html)
* [use_interval](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/timing/fn.use_interval.html)

### Persisting Data

#### Local Storage

* [use_persistent](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_persistent.html)
* [use_storage](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage.html)
* [use_singleton_persistent](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_singleton_persistent.html)
* [use_storage_entry](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_storage_entry.html)

#### Synced Storage

* [use_synced_storage](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage.html)
* [use_synced_storage_entry](https://docs.rs/dioxus-sdk/latest/dioxus_sdk/storage/fn.use_synced_storage_entry.html)

### Global

* [GlobalSignal](https://docs.rs/dioxus/latest/dioxus/prelude/type.GlobalSignal.html)
* [GlobalMemo](https://docs.rs/dioxus/latest/dioxus/prelude/type.GlobalMemo.html)
* [Global](https://docs.rs/dioxus/latest/dioxus/prelude/struct.Global.html)

### Navigation & Routing

#### Core Routing

* [Routable](https://docs.rs/dioxus/latest/dioxus/prelude/trait.Routable.html)
* [use_route](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_route.html)
* [use_navigator](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_navigator.html)

#### Nested Routes

* [use_outlet_context](https://docs.rs/dioxus-router/latest/dioxus_router/hooks/fn.use_outlet_context.html)


[use_hook]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook.html
[use_hook_with_cleanup]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_with_cleanup.html
[use_hook_did_run]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_hook_did_run.html
[use_signal]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html
[use_signal_sync]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal_sync.html
[use_effect]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html
[use_memo]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_memo.html
[use_reactive]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_reactive.html
[use_callback]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_callback.html
[use_future]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html
[use_server_future]: https://docs.rs/dioxus-fullstack/latest/dioxus_fullstack/prelude/fn.use_server_future.html
[use_server_cached]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_server_cached.html
[use_coroutine]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html
[use_coroutine_handle]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_coroutine_handle.html
[use_channel]: https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_channel.html
[use_listen_channel]: https://docs.rs/dioxus-sdk/latest/dioxus_sdk/utils/channel/fn.use_listen_channel.html
[use_resource]: https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_resource.html
[use_before_render]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_before_render.html
[use_after_render]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_after_render.html
[use_drop]: https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_drop.html