feat(docs): Improved shared state, use_effect and use_memo docs

packages/hooks/src/useeffect.rs

@@ -9,17 +9,30 @@ use crate::UseFutureDep;
 /// If a future is pending when the dependencies change, the previous future
 /// will be allowed to continue
 ///
-/// - dependencies: a tuple of references to values that are PartialEq + Clone
+/// - dependencies: a tuple of references to values that are `PartialEq` + `Clone`
 ///
 /// ## Examples
 ///
-/// ```rust, ignore
+/// ```rust, no_run
 ///
 /// #[inline_props]
-/// fn app(cx: Scope, name: &str) -> Element {
-///     use_effect(cx, (name,), |(name,)| async move {
-///         set_title(name);
-///     }))
+/// fn Profile(cx: Scope, id: &str) -> Element {
+///     let name = use_state(cx, || "Default name");
+///
+///     use_effect(cx, (id,), |(id,)| async move {
+///         let user = fetch_user(id).await;
+///         name.set(user.name);
+///     });
+///
+///     render!(
+///         p { "{name}" }
+///     )
+/// }
+///
+/// fn app(cx: Scope) -> Element {
+///     render!(
+///         Profile { id: "dioxusLabs" }
+///     )
 /// }
 /// ```
 pub fn use_effect<T, F, D>(cx: &ScopeState, dependencies: D, future: impl FnOnce(D::Out) -> F)

packages/hooks/src/usememo.rs

@@ -2,21 +2,31 @@ use dioxus_core::ScopeState;
 
 use crate::UseFutureDep;
 
-/// A hook that provides a callback that executes after the hooks have been applied
+/// A hook that provides a callback that executes if the dependencies change.
+/// This is useful to avoid running computation-expensive calculations even when the data doesn't change.
 ///
-/// Whenever the hooks dependencies change, the callback will be re-evaluated.
-///
-/// - dependencies: a tuple of references to values that are PartialEq + Clone
+/// - dependencies: a tuple of references to values that are `PartialEq` + `Clone`
 ///
 /// ## Examples
 ///
-/// ```rust, ignore
+/// ```rust, no_run
 ///
 /// #[inline_props]
-/// fn app(cx: Scope, name: &str) -> Element {
-///     use_memo(cx, (name,), |(name,)| {
-///         expensive_computation(name);
-///     }))
+/// fn Calculator(cx: Scope, number: usize) -> Element {
+///     let bigger_number = use_memo(cx, (number,), |(number,)| {
+///         // This will only be calculated when `number` has changed.
+///         number * 100
+///     }):
+///
+///     render!(
+///         p { "{bigger_number}" }
+///     )
+/// }
+///
+/// fn app(cx: Scope) -> Element {
+///     render!(
+///         Calculator { number: 0 }
+///     )
 /// }
 /// ```
 pub fn use_memo<T, D>(cx: &ScopeState, dependencies: D, callback: impl FnOnce(D::Out) -> T) -> &T