From 95267ae340b2c8af68c4e471c46984390f2c2b29 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Sat, 16 Aug 2025 07:14:07 +0000 Subject: [PATCH 1/3] Improve hook introduction --- docs-src/0.7/src/essentials/basics/hooks.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs-src/0.7/src/essentials/basics/hooks.md b/docs-src/0.7/src/essentials/basics/hooks.md index 835b1cc2e..22594ad49 100644 --- a/docs-src/0.7/src/essentials/basics/hooks.md +++ b/docs-src/0.7/src/essentials/basics/hooks.md @@ -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. 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 From fb38069be99a18aee33fe14bdbc62c56312ea0cf Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Sat, 16 Aug 2025 07:24:44 +0000 Subject: [PATCH 2/3] Add hook cheat sheet --- docs-src/0.7/src/SUMMARY.md | 1 + docs-src/0.7/src/guides/hook_cheat_sheet.md | 118 ++++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 docs-src/0.7/src/guides/hook_cheat_sheet.md diff --git a/docs-src/0.7/src/SUMMARY.md b/docs-src/0.7/src/SUMMARY.md index 1ace697dc..59a0e7f7f 100644 --- a/docs-src/0.7/src/SUMMARY.md +++ b/docs-src/0.7/src/SUMMARY.md @@ -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) diff --git a/docs-src/0.7/src/guides/hook_cheat_sheet.md b/docs-src/0.7/src/guides/hook_cheat_sheet.md new file mode 100644 index 000000000..c330598f1 --- /dev/null +++ b/docs-src/0.7/src/guides/hook_cheat_sheet.md @@ -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 \ No newline at end of file From 5edd44088bf1b6c0db03be034345fdf5de8ef700 Mon Sep 17 00:00:00 2001 From: mcmah309 Date: Sat, 16 Aug 2025 07:33:52 +0000 Subject: [PATCH 3/3] Add use prefix notice to hook intro --- docs-src/0.7/src/essentials/basics/hooks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-src/0.7/src/essentials/basics/hooks.md b/docs-src/0.7/src/essentials/basics/hooks.md index 22594ad49..05222aefc 100644 --- a/docs-src/0.7/src/essentials/basics/hooks.md +++ b/docs-src/0.7/src/essentials/basics/hooks.md @@ -1,6 +1,6 @@ # Hooks -A **hook** is a special function that lets a component "hook into" certain capabilities or lifecycle of the framework. 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. +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 - providing a way of storing state, attaching effects, and enabling composability that integrates well with the full Dioxus reactivity system.