updated docs

docs/guide/src/en/async/use_effect.md

@@ -4,7 +4,6 @@
 
 Whenever the hooks [dependencies](#dependencies) change, the future will be re-evaluated. This is useful to syncrhonize with external events.
 
-
 ## Dependencies
 
 You can make the future re-run when some value changes. For example, you might want to fetch a user's data only when the user id changes. You can provide a tuple of "dependencies" to the hook. It will automatically re-run the future when any of those dependencies change.
@@ -13,23 +12,26 @@ Example:
 
 ```rust, no_run
 #[inline_props]
-fn Profile(cx: Scope, id: &str) -> Element {
+fn Profile(cx: Scope, id: usize) -> Element {
-    let name = use_state(cx, || "Default name");
+    let name = use_state(cx, || None);
 
     // Only fetch the user data when the id changes.
-    use_effect(cx, (id,), |(id,)| async move {
+    use_effect(cx, (id,), |(id,)| {
-        let user = fetch_user(id).await;
+        to_owned![name];
-        name.set(user.name);
+        async move {
+            let user = fetch_user(id).await;
+            name.set(user.name);
+        }
     });
 
+    let name = name.get().clone().unwrap_or("Loading...".to_string());
+
     render!(
         p { "{name}" }
     )
 }
 
 fn app(cx: Scope) -> Element {
-    render!(
+    render!(Profile { id: 0 })
-        Profile { id: "dioxusLabs" }
-    )
 }
-```
+```

docs/guide/src/en/interactivity/memoization.md

@@ -8,16 +8,12 @@ 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!(
+    render!(Calculator { number: 0 })
-        Calculator { number: 0 }
-    )
 }
 ```

packages/hooks/src/useeffect.rs

@@ -14,25 +14,28 @@ use crate::UseFutureDep;
 /// ## Examples
 ///
 /// ```rust, no_run
-///
 /// #[inline_props]
-/// fn Profile(cx: Scope, id: &str) -> Element {
+/// fn Profile(cx: Scope, id: usize) -> Element {
-///     let name = use_state(cx, || "Default name");
+///     let name = use_state(cx, || None);
 ///
-///     use_effect(cx, (id,), |(id,)| async move {
+///     // Only fetch the user data when the id changes.
-///         let user = fetch_user(id).await;
+///     use_effect(cx, (id,), |(id,)| {
-///         name.set(user.name);
+///         to_owned![name];
+///         async move {
+///             let user = fetch_user(id).await;
+///             name.set(user.name);
+///         }
 ///     });
 ///
+///     let name = name.get().clone().unwrap_or("Loading...".to_string());
+///
 ///     render!(
 ///         p { "{name}" }
 ///     )
 /// }
 ///
 /// fn app(cx: Scope) -> Element {
-///     render!(
+///     render!(Profile { id: 0 })
-///         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

@@ -16,17 +16,13 @@ use crate::UseFutureDep;
 ///     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!(
+///     render!(Calculator { number: 0 })
-///         Calculator { number: 0 }
-///     )
 /// }
 /// ```
 pub fn use_memo<T, D>(cx: &ScopeState, dependencies: D, callback: impl FnOnce(D::Out) -> T) -> &T