From fc7d94b8d163cbc194aa4c870249bbdcbb58fde5 Mon Sep 17 00:00:00 2001 From: Reinis Mazeiks Date: Thu, 10 Feb 2022 13:28:54 +0200 Subject: [PATCH] Proofread chapter 7 --- docs/guide/src/interactivity/hooks.md | 25 ++++++------------- .../guide/src/interactivity/importanthooks.md | 23 +++-------------- docs/guide/src/interactivity/index.md | 8 +++--- 3 files changed, 17 insertions(+), 39 deletions(-) diff --git a/docs/guide/src/interactivity/hooks.md b/docs/guide/src/interactivity/hooks.md index b9ec32e58..a90afe2dc 100644 --- a/docs/guide/src/interactivity/hooks.md +++ b/docs/guide/src/interactivity/hooks.md @@ -80,7 +80,7 @@ This pattern might seem strange at first, but it can be a significant upgrade ov ## Rules of hooks Hooks are sensitive to how they are used. To use hooks, you must abide by the -"rules of hooks" (borrowed from react)](https://reactjs.org/docs/hooks-rules.html): +"rules of hooks" ([borrowed from react](https://reactjs.org/docs/hooks-rules.html)): - Functions with "use_" should not be called in callbacks - Functions with "use_" should not be called out of order @@ -245,19 +245,10 @@ fn example(cx: Scope) -> Element { By default, we bundle a handful of hooks in the Dioxus-Hooks package. Feel free to click on each hook to view its definition and associated documentation. -- [use_state](https://docs.rs/dioxus_hooks/use_state) - store state with ergonomic updates -- [use_ref](https://docs.rs/dioxus_hooks/use_ref) - store non-clone state with a refcell -- [use_future](https://docs.rs/dioxus_hooks/use_future) - store a future to be polled after initialization -- [use_coroutine](https://docs.rs/dioxus_hooks/use_coroutine) - store a future that can be stopped/started/communicated with -- [use_noderef](https://docs.rs/dioxus_hooks/use_noderef) - store a handle to the native element -- [use_callback](https://docs.rs/dioxus_hooks/use_callback) - store a callback that implements PartialEq for memoization -- [use_provide_context](https://docs.rs/dioxus_hooks/use_provide_context) - expose state to descendent components -- [use_context](https://docs.rs/dioxus_hooks/use_context) - consume state provided by `use_provide_context` - -For a more in-depth guide to building new hooks, checkout out the advanced hook building guide in the reference. - -## Wrapping up - -In this chapter, we learned about the mechanics and intricacies of storing state inside a component. - -In the next chapter, we'll cover event listeners in similar depth, and how to combine the two to build interactive components. +- [use_state](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_state.html) - store state with ergonomic updates +- [use_ref](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_ref.html) - store non-clone state with a refcell +- [use_future](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html) - store a future to be polled after initialization +- [use_coroutine](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html) - store a future that can be stopped/started/communicated with +- [use_context_provider](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html) - expose state to descendent components +- [use_context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context.html) - consume state provided by `use_provide_context` +- [use_suspense](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_suspense.html) diff --git a/docs/guide/src/interactivity/importanthooks.md b/docs/guide/src/interactivity/importanthooks.md index fb985ce90..161c5becf 100644 --- a/docs/guide/src/interactivity/importanthooks.md +++ b/docs/guide/src/interactivity/importanthooks.md @@ -2,23 +2,13 @@ Most components you will write in Dioxus will need to store state somehow. For local state, we provide two very convenient hooks: -- `use_state` -- `use_ref` +- [use_state](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_state.html) +- [use_ref](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_ref.html) Both of these hooks are extremely powerful and flexible, so we've dedicated this section to understanding them properly. > These two hooks are not the only way to store state. You can always build your own hooks! -## Note on Hooks - -If you're struggling with errors due to usage in hooks, make sure you're following the rules of hooks: - -- Functions with "use_" should not be called in callbacks -- Functions with "use_" should not be called out of order -- Functions with "use_" should not be called in loops or conditionals - -A large majority of issues that seem to be "wrong with Dioxus" are actually just a misuse of hooks. - ## `use_state` The `use_state` hook is very similar to its React counterpart. When we use it, we get two values: @@ -84,7 +74,7 @@ cx.spawn({ You might've noticed a fundamental limitation to `use_state`: to modify the value in-place, it must be cheaply cloneable. But what if your type is not cheap to clone? -In these cases, you should reach for `use_ref` which is essentially just a glorified `Rc>` (typical Rust UI shenanigans). +In these cases, you should reach for `use_ref` which is essentially just a glorified `Rc>` (Rust [smart pointers](https://doc.rust-lang.org/book/ch15-04-rc.html)). This provides us some runtime locks around our data, trading reliability for performance. For most cases though, you will find it hard to make `use_ref` crash. @@ -117,7 +107,7 @@ names.write().push("Tiger"); If you don't want to re-render the component when names is updated, then we can use the `write_silent` method: ```rust -names.write().push("Transmogrifier"); +names.write_silent().push("Transmogrifier"); ``` Again, like `UseState`, the `UseRef` handle is clonable into async contexts: @@ -135,8 +125,3 @@ cx.spawn({ } }) ``` - - -## Wrapping up - -These two hooks are extremely powerful at storing state. diff --git a/docs/guide/src/interactivity/index.md b/docs/guide/src/interactivity/index.md index 8826398e5..6075a4a5a 100644 --- a/docs/guide/src/interactivity/index.md +++ b/docs/guide/src/interactivity/index.md @@ -44,9 +44,9 @@ fn App(cx: Scope) -> Element { } ``` -State in Dioxus follows a pattern called "one-way-data-flow." As your components create new components as their children, your app's structure will eventually grow into a tree where state gets passed down from the root component into "leaves" of the tree. +State in Dioxus follows a pattern called "one-way data-flow." As your components create new components as their children, your app's structure will eventually grow into a tree where state gets passed down from the root component into "leaves" of the tree. -You've probably seen the tree of UI components represented using an directed-acyclic-graph: +You've probably seen the tree of UI components represented using a directed acyclic graph: ![image](../images/component_tree.png) @@ -173,11 +173,13 @@ With these building blocks, we can craft new hooks similar to `use_state` that l In general, Dioxus should be plenty fast for most use cases. However, there are some rules you should consider following to ensure your apps are quick. -- 1) **Don't call set—state _while rendering_**. This will cause Dioxus to unnecessarily re-check the component for updates or enter an infinite loop. +- 1) **Don't call set_state _while rendering_**. This will cause Dioxus to unnecessarily re-check the component for updates or enter an infinite loop. - 2) **Break your state apart into smaller sections.** Hooks are explicitly designed to "unshackle" your state from the typical model-view-controller paradigm, making it easy to reuse useful bits of code with a single function. - 3) **Move local state down**. Dioxus will need to re-check child components of your app if the root component is constantly being updated. You'll get best results if rapidly-changing state does not cause major re-renders. + ## The `Scope` object