Merge pull request #129 from DioxusLabs/jk/update-hooks

Hooks: Change UseState to be like react's use_state

examples/calculator.rs

@@ -18,17 +18,19 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let display_value: UseState<String> = use_state(&cx, || String::from("0"));
+    let (display_value, set_display_value) = use_state(&cx, || String::from("0"));
 
     let input_digit = move |num: u8| {
-        if display_value.get() == "0" {
-            display_value.set(String::new());
+        if display_value == "0" {
+            set_display_value(String::new());
         }
-        display_value.modify().push_str(num.to_string().as_str());
+        set_display_value
+            .make_mut()
+            .push_str(num.to_string().as_str());
     };
 
     let input_operator = move |key: &str| {
-        display_value.modify().push_str(key);
+        set_display_value.make_mut().push_str(key);
     };
 
     cx.render(rsx!(
@@ -53,7 +55,7 @@ fn app(cx: Scope) -> Element {
                         KeyCode::Num9 => input_digit(9),
                         KeyCode::Backspace => {
                             if !display_value.len() != 0 {
-                                display_value.modify().pop();
+                                set_display_value.make_mut().pop();
                             }
                         }
                         _ => {}
@@ -65,21 +67,21 @@ fn app(cx: Scope) -> Element {
                                 button {
                                     class: "calculator-key key-clear",
                                     onclick: move |_| {
-                                        display_value.set(String::new());
-                                        if display_value != "" {
-                                            display_value.set("0".into());
+                                        set_display_value(String::new());
+                                        if !display_value.is_empty(){
+                                            set_display_value("0".into());
                                         }
                                     },
-                                    [if display_value == "" { "C" } else { "AC" }]
+                                    [if display_value.is_empty() { "C" } else { "AC" }]
                                 }
                                 button {
                                     class: "calculator-key key-sign",
                                     onclick: move |_| {
-                                        let temp = calc_val(display_value.get().clone());
+                                        let temp = calc_val(display_value.clone());
                                         if temp > 0.0 {
-                                            display_value.set(format!("-{}", temp));
+                                            set_display_value(format!("-{}", temp));
                                         } else {
-                                            display_value.set(format!("{}", temp.abs()));
+                                            set_display_value(format!("{}", temp.abs()));
                                         }
                                     },
                                     "±"
@@ -87,8 +89,8 @@ fn app(cx: Scope) -> Element {
                                 button {
                                     class: "calculator-key key-percent",
                                     onclick: move |_| {
-                                        display_value.set(
-                                            format!("{}", calc_val(display_value.get().clone()) / 100.0)
+                                        set_display_value(
+                                            format!("{}", calc_val(display_value.clone()) / 100.0)
                                         );
                                     },
                                     "%"
@@ -98,7 +100,7 @@ fn app(cx: Scope) -> Element {
                                 button { class: "calculator-key key-0", onclick: move |_| input_digit(0),
                                     "0"
                                 }
-                                button { class: "calculator-key key-dot", onclick: move |_| display_value.modify().push('.'),
+                                button { class: "calculator-key key-dot", onclick: move |_| set_display_value.make_mut().push('.'),
                                     "●"
                                 }
                                 (1..10).map(|k| rsx!{
@@ -130,7 +132,7 @@ fn app(cx: Scope) -> Element {
                             }
                             button { class: "calculator-key key-equals",
                                 onclick: move |_| {
-                                    display_value.set(format!("{}", calc_val(display_value.get().clone())));
+                                    set_display_value(format!("{}", calc_val(display_value.clone())));
                                 },
                                 "="
                             }

examples/crm.rs

@@ -20,11 +20,11 @@ pub struct Client {
 }
 
 fn app(cx: Scope) -> Element {
-    let scene = use_state(&cx, || Scene::ClientsList);
     let clients = use_ref(&cx, || vec![] as Vec<Client>);
-    let firstname = use_state(&cx, String::new);
-    let lastname = use_state(&cx, String::new);
-    let description = use_state(&cx, String::new);
+    let (scene, set_scene) = use_state(&cx, || Scene::ClientsList);
+    let (firstname, set_firstname) = use_state(&cx, String::new);
+    let (lastname, set_lastname) = use_state(&cx, String::new);
+    let (description, set_description) = use_state(&cx, String::new);
 
     cx.render(rsx!(
         body {
@@ -38,7 +38,7 @@ fn app(cx: Scope) -> Element {
 
             h1 {"Dioxus CRM Example"}
 
-            match *scene {
+            match scene {
                 Scene::ClientsList => rsx!(
                     div { class: "crm",
                         h2 { margin_bottom: "10px", "List of clients" }
@@ -51,8 +51,8 @@ fn app(cx: Scope) -> Element {
                                 })
                             )
                         }
-                        button { class: "pure-button pure-button-primary", onclick: move |_| scene.set(Scene::NewClientForm), "Add New" }
-                        button { class: "pure-button", onclick: move |_| scene.set(Scene::Settings), "Settings" }
+                        button { class: "pure-button pure-button-primary", onclick: move |_| set_scene(Scene::NewClientForm), "Add New" }
+                        button { class: "pure-button", onclick: move |_| set_scene(Scene::Settings), "Settings" }
                     }
                 ),
                 Scene::NewClientForm => rsx!(
@@ -63,19 +63,19 @@ fn app(cx: Scope) -> Element {
                                 class: "new-client firstname",
                                 placeholder: "First name",
                                 value: "{firstname}",
-                                oninput: move |e| firstname.set(e.value.clone())
+                                oninput: move |e| set_firstname(e.value.clone())
                             }
                             input {
                                 class: "new-client lastname",
                                 placeholder: "Last name",
                                 value: "{lastname}",
-                                oninput: move |e| lastname.set(e.value.clone())
+                                oninput: move |e| set_lastname(e.value.clone())
                             }
                             textarea {
                                 class: "new-client description",
                                 placeholder: "Description",
                                 value: "{description}",
-                                oninput: move |e| description.set(e.value.clone())
+                                oninput: move |e| set_description(e.value.clone())
                             }
                         }
                         button {
@@ -86,13 +86,13 @@ fn app(cx: Scope) -> Element {
                                     first_name: (*firstname).clone(),
                                     last_name: (*lastname).clone(),
                                 });
-                                description.set(String::new());
-                                firstname.set(String::new());
-                                lastname.set(String::new());
+                                set_description(String::new());
+                                set_firstname(String::new());
+                                set_lastname(String::new());
                             },
                             "Add New"
                         }
-                        button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList),
+                        button { class: "pure-button", onclick: move |_| set_scene(Scene::ClientsList),
                             "Go Back"
                         }
                     }
@@ -108,7 +108,7 @@ fn app(cx: Scope) -> Element {
                         }
                         button {
                             class: "pure-button pure-button-primary",
-                            onclick: move |_| scene.set(Scene::ClientsList),
+                            onclick: move |_| set_scene(Scene::ClientsList),
                             "Go Back"
                         }
                     }

examples/disabled.rs

@@ -5,12 +5,12 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let disabled = use_state(&cx, || false);
+    let (disabled, set_disabled) = use_state(&cx, || false);
 
     cx.render(rsx! {
         div {
             button {
-                onclick: move |_| disabled.set(!disabled.get()),
+                onclick: move |_| set_disabled(!disabled),
                 "click to " [if *disabled {"enable"} else {"disable"} ] " the lower button"
             }
 

examples/dog_app.rs

@@ -24,7 +24,7 @@ fn app(cx: Scope) -> Element {
             .await
     });
 
-    let selected_breed = use_state(&cx, || None);
+    let (breed, set_breed) = use_state(&cx, || None);
 
     match fut.value() {
         Some(Ok(breeds)) => cx.render(rsx! {
@@ -36,14 +36,14 @@ fn app(cx: Scope) -> Element {
                         breeds.message.keys().map(|breed| rsx!(
                             li {
                                 button {
-                                    onclick: move |_| selected_breed.set(Some(breed.clone())),
+                                    onclick: move |_| set_breed(Some(breed.clone())),
                                     "{breed}"
                                 }
                             }
                         ))
                     }
                     div { flex: "50%",
-                        match &*selected_breed {
+                        match breed {
                             Some(breed) => rsx!( Breed { breed: breed.clone() } ),
                             None => rsx!("No Breed selected"),
                         }
@@ -73,9 +73,9 @@ fn Breed(cx: Scope, breed: String) -> Element {
         reqwest::get(endpoint).await.unwrap().json::<DogApi>().await
     });
 
-    let breed_name = use_state(&cx, || breed.clone());
-    if breed_name.get() != breed {
-        breed_name.set(breed.clone());
+    let (name, set_name) = use_state(&cx, || breed.clone());
+    if name != breed {
+        set_name(breed.clone());
         fut.restart();
     }
 

examples/framework_benchmark.rs

@@ -33,7 +33,7 @@ impl Label {
 
 fn app(cx: Scope) -> Element {
     let items = use_ref(&cx, Vec::new);
-    let selected = use_state(&cx, || None);
+    let (selected, set_selected) = use_state(&cx, || None);
 
     cx.render(rsx! {
         div { class: "container",
@@ -71,7 +71,7 @@ fn app(cx: Scope) -> Element {
                         rsx!(tr { class: "{is_in_danger}",
                             td { class:"col-md-1" }
                             td { class:"col-md-1", "{item.key}" }
-                            td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
+                            td { class:"col-md-1", onclick: move |_| set_selected(Some(id)),
                                 a { class: "lbl", item.labels }
                             }
                             td { class: "col-md-1",

examples/hydration.rs

@@ -20,13 +20,13 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let val = use_state(&cx, || 0);
+    let (val, set_val) = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
             h1 { "hello world. Count: {val}" }
             button {
-                onclick: move |_| *val.modify() += 1,
+                onclick: move |_| set_val(val + 1),
                 "click to increment"
             }
         }

examples/pattern_reducer.rs

@@ -15,16 +15,16 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let state = use_state(&cx, PlayerState::new);
+    let (state, set_state) = use_state(&cx, PlayerState::new);
 
     cx.render(rsx!(
         div {
             h1 {"Select an option"}
             h3 { "The radio is... " [state.is_playing()] "!" }
-            button { onclick: move |_| state.modify().reduce(PlayerAction::Pause),
+            button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Pause),
                 "Pause"
             }
-            button { onclick: move |_| state.modify().reduce(PlayerAction::Play),
+            button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Play),
                 "Play"
             }
         }

examples/readme.rs

@@ -9,13 +9,13 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let (count, set_count) = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
             h1 { "High-Five counter: {count}" }
-            button { onclick: move |_| count += 1, "Up high!" }
-            button { onclick: move |_| count -= 1, "Down low!" }
+            button { onclick: move |_| set_count(count + 1), "Up high!" }
+            button { onclick: move |_| set_count(count - 1), "Down low!" }
         }
     })
 }

examples/rsx_compile_fail.rs

@@ -12,7 +12,7 @@ fn main() {
 }
 
 fn example(cx: Scope) -> Element {
-    let items = use_state(&cx, || {
+    let (items, _set_items) = use_state(&cx, || {
         vec![Thing {
             a: "asd".to_string(),
             b: 10,

examples/tasks.rs

@@ -10,14 +10,14 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
+    let (count, set_count) = use_state(&cx, || 0);
 
     use_future(&cx, move || {
-        let mut count = count.for_async();
+        let set_count = set_count.to_owned();
         async move {
             loop {
                 tokio::time::sleep(Duration::from_millis(1000)).await;
-                count += 1;
+                set_count.modify(|f| f + 1);
             }
         }
     });
@@ -26,7 +26,7 @@ fn app(cx: Scope) -> Element {
         div {
             h1 { "Current count: {count}" }
             button {
-                onclick: move |_| count.set(0),
+                onclick: move |_| set_count(0),
                 "Reset the count"
             }
         }

examples/todomvc.rs

@@ -19,15 +19,15 @@ pub struct TodoItem {
 }
 
 pub fn app(cx: Scope<()>) -> Element {
-    let todos = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
-    let filter = use_state(&cx, || FilterState::All);
-    let draft = use_state(&cx, || "".to_string());
-    let mut todo_id = use_state(&cx, || 0);
+    let (todos, set_todos) = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
+    let (filter, set_filter) = use_state(&cx, || FilterState::All);
+    let (draft, set_draft) = use_state(&cx, || "".to_string());
+    let (todo_id, set_todo_id) = use_state(&cx, || 0);
 
     // Filter the todos based on the filter state
     let mut filtered_todos = todos
         .iter()
-        .filter(|(_, item)| match *filter {
+        .filter(|(_, item)| match filter {
             FilterState::All => true,
             FilterState::Active => !item.checked,
             FilterState::Completed => item.checked,
@@ -54,25 +54,25 @@ pub fn app(cx: Scope<()>) -> Element {
                         placeholder: "What needs to be done?",
                         value: "{draft}",
                         autofocus: "true",
-                        oninput: move |evt| draft.set(evt.value.clone()),
+                        oninput: move |evt| set_draft(evt.value.clone()),
                         onkeydown: move |evt| {
                             if evt.key == "Enter" && !draft.is_empty() {
-                                todos.modify().insert(
+                                set_todos.make_mut().insert(
                                     *todo_id,
                                     TodoItem {
                                         id: *todo_id,
                                         checked: false,
-                                        contents: draft.get().clone(),
+                                        contents: draft.clone(),
                                     },
                                 );
-                                todo_id += 1;
-                                draft.set("".to_string());
+                                set_todo_id(todo_id + 1);
+                                set_draft("".to_string());
                             }
                         }
                     }
                 }
                 ul { class: "todo-list",
-                    filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, todos: todos  )))
+                    filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, set_todos: set_todos  )))
                 }
                 (!todos.is_empty()).then(|| rsx!(
                     footer { class: "footer",
@@ -81,14 +81,14 @@ pub fn app(cx: Scope<()>) -> Element {
                             span {"{item_text} left"}
                         }
                         ul { class: "filters",
-                            li { class: "All", a { onclick: move |_| filter.set(FilterState::All), "All" }}
-                            li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
-                            li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
+                            li { class: "All", a { onclick: move |_| set_filter(FilterState::All), "All" }}
+                            li { class: "Active", a { onclick: move |_| set_filter(FilterState::Active), "Active" }}
+                            li { class: "Completed", a { onclick: move |_| set_filter(FilterState::Completed), "Completed" }}
                         }
                         (show_clear_completed).then(|| rsx!(
                             button {
                                 class: "clear-completed",
-                                onclick: move |_| todos.modify().retain(|_, todo| !todo.checked),
+                                onclick: move |_| set_todos.make_mut().retain(|_, todo| !todo.checked),
                                 "Clear completed"
                             }
                         ))
@@ -106,24 +106,26 @@ pub fn app(cx: Scope<()>) -> Element {
 
 #[derive(Props)]
 pub struct TodoEntryProps<'a> {
-    todos: UseState<'a, im_rc::HashMap<u32, TodoItem>>,
+    set_todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
     id: u32,
 }
 
 pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
-    let todo = &cx.props.todos[&cx.props.id];
-    let is_editing = use_state(&cx, || false);
+    let (is_editing, set_is_editing) = use_state(&cx, || false);
+
+    let todos = cx.props.set_todos.get();
+    let todo = &todos[&cx.props.id];
     let completed = if todo.checked { "completed" } else { "" };
-    let editing = if *is_editing.get() { "editing" } else { "" };
+    let editing = if *is_editing { "editing" } else { "" };
 
     rsx!(cx, li {
         class: "{completed} {editing}",
-        onclick: move |_| is_editing.set(true),
-        onfocusout: move |_| is_editing.set(false),
+        onclick: move |_| set_is_editing(true),
+        onfocusout: move |_| set_is_editing(false),
         div { class: "view",
             input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
                 onchange: move |evt| {
-                    cx.props.todos.modify()[&cx.props.id].checked = evt.value.parse().unwrap();
+                    cx.props.set_todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
                 }
             }
             label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" }
@@ -132,11 +134,11 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
             input {
                 class: "edit",
                 value: "{todo.contents}",
-                oninput: move |evt| cx.props.todos.modify()[&cx.props.id].contents = evt.value.clone(),
+                oninput: move |evt| cx.props.set_todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
                 autofocus: "true",
                 onkeydown: move |evt| {
                     match evt.key.as_str() {
-                        "Enter" | "Escape" | "Tab" => is_editing.set(false),
+                        "Enter" | "Escape" | "Tab" => set_is_editing(false),
                         _ => {}
                     }
                 },

examples/xss_safety.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let contents = use_state(&cx, || {
+    let (contents, set_contents) = use_state(&cx, || {
         String::from("<script>alert(\"hello world\")</script>")
     });
 
@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
             input {
                 value: "{contents}",
                 r#type: "text",
-                oninput: move |e| contents.set(e.value.clone()),
+                oninput: move |e| set_contents(e.value.clone()),
             }
         }
     })

packages/hooks/src/lib.rs

@@ -16,45 +16,25 @@ pub use usefuture::*;
 mod usesuspense;
 pub use usesuspense::*;
 
-// #[macro_export]
-// macro_rules! to_owned {
-//     ($($es:ident),+) => {$(
-//         #[allow(unused_mut)]
-//         let mut $es = $es.to_owned();
-//     )*}
-// }
-
-// /// Calls `for_async` on the series of paramters.
-// ///
-// /// If the type is Clone, then it will be cloned. However, if the type is not `clone`
-// /// then it must have a `for_async` method for Rust to lower down into.
-// ///
-// /// See: how use_state implements `for_async` but *not* through the trait.
-// #[macro_export]
-// macro_rules! for_async {
-//     ($($es:ident),+) => {$(
-//         #[allow(unused_mut)]
-//         let mut $es = $es.for_async();
-//     )*}
-// }
-
-// /// This is a marker trait that uses decoherence.
-// ///
-// /// It is *not* meant for hooks to actually implement, but rather defer to their
-// /// underlying implementation if they *don't* implement the trait.
-// ///
-// ///
-// pub trait AsyncHook {
-//     type Output;
-//     fn for_async(self) -> Self::Output;
-// }
-
-// impl<T> AsyncHook for T
-// where
-//     T: ToOwned<Owned = T>,
-// {
-//     type Output = T;
-//     fn for_async(self) -> Self::Output {
-//         self
-//     }
-// }
+#[macro_export]
+/// A helper macro for using hooks in async environements.
+///
+/// # Usage
+///
+///
+/// ```
+/// let (data) = use_ref(&cx, || {});
+///
+/// let handle_thing = move |_| {
+///     to_owned![data]
+///     cx.spawn(async move {
+///         // do stuff
+///     });
+/// }
+/// ```
+macro_rules! to_owned {
+    ($($es:ident),+) => {$(
+        #[allow(unused_mut)]
+        let mut $es = $es.to_owned();
+    )*}
+}

packages/hooks/src/usestate.rs

@@ -0,0 +1,343 @@
+#![warn(clippy::pedantic)]
+
+use dioxus_core::prelude::*;
+use std::{
+    cell::{RefCell, RefMut},
+    fmt::{Debug, Display},
+    rc::Rc,
+};
+
+/// Store state between component renders.
+///
+/// ## Dioxus equivalent of useState, designed for Rust
+///
+/// The Dioxus version of `useState` for state management inside components. It allows you to ergonomically store and
+/// modify state between component renders. When the state is updated, the component will re-render.
+///
+///
+/// ```ignore
+/// const Example: Component = |cx| {
+///     let (count, set_count) = use_state(&cx, || 0);
+///
+///     cx.render(rsx! {
+///         div {
+///             h1 { "Count: {count}" }
+///             button { onclick: move |_| set_count(a - 1), "Increment" }
+///             button { onclick: move |_| set_count(a + 1), "Decrement" }
+///         }
+///     ))
+/// }
+/// ```
+pub fn use_state<'a, T: 'static>(
+    cx: &'a ScopeState,
+    initial_state_fn: impl FnOnce() -> T,
+) -> (&'a T, &'a UseState<T>) {
+    let hook = cx.use_hook(move |_| {
+        let current_val = Rc::new(initial_state_fn());
+        let update_callback = cx.schedule_update();
+        let slot = Rc::new(RefCell::new(current_val.clone()));
+        let setter = Rc::new({
+            crate::to_owned![update_callback, slot];
+            move |new| {
+                let mut slot = slot.borrow_mut();
+
+                // if there's only one reference (weak or otherwise), we can just swap the values
+                // Typically happens when the state is set multiple times - we don't want to create a new Rc for each new value
+                if let Some(val) = Rc::get_mut(&mut slot) {
+                    *val = new;
+                } else {
+                    *slot = Rc::new(new);
+                }
+
+                update_callback();
+            }
+        });
+
+        UseState {
+            current_val,
+            update_callback,
+            setter,
+            slot,
+        }
+    });
+
+    (hook.current_val.as_ref(), hook)
+}
+
+pub struct UseState<T: 'static> {
+    pub(crate) current_val: Rc<T>,
+    pub(crate) update_callback: Rc<dyn Fn()>,
+    pub(crate) setter: Rc<dyn Fn(T)>,
+    pub(crate) slot: Rc<RefCell<Rc<T>>>,
+}
+
+impl<T: 'static> UseState<T> {
+    /// Get the current value of the state by cloning its container Rc.
+    ///
+    /// This is useful when you are dealing with state in async contexts but need
+    /// to know the current value. You are not given a reference to the state.
+    ///
+    /// # Examples
+    /// An async context might need to know the current value:
+    ///
+    /// ```rust, ignore
+    /// fn component(cx: Scope) -> Element {
+    ///     let (count, set_count) = use_state(&cx, || 0);
+    ///     cx.spawn({
+    ///         let set_count = set_count.to_owned();
+    ///         async move {
+    ///             let current = set_count.current();
+    ///         }
+    ///     })
+    /// }
+    /// ```    
+    #[must_use]
+    pub fn current(&self) -> Rc<T> {
+        self.slot.borrow().clone()
+    }
+
+    /// Get the `setter` function directly without the `UseState` wrapper.
+    ///
+    /// This is useful for passing the setter function to other components.
+    ///
+    /// However, for most cases, calling `to_owned` o`UseState`te is the
+    /// preferred way to get "anoth`set_state`tate handle.
+    ///
+    ///
+    /// # Examples
+    /// A component might require an `Rc<dyn Fn(T)>` as an input to set a value.
+    ///
+    /// ```rust, ignore
+    /// fn component(cx: Scope) -> Element {
+    ///     let (value, set_value) = use_state(&cx, || 0);
+    ///
+    ///     rsx!{
+    ///         Component {
+    ///             handler: set_val.setter()
+    ///         }
+    ///     }
+    /// }
+    /// ```
+    #[must_use]
+    pub fn setter(&self) -> Rc<dyn Fn(T)> {
+        self.setter.clone()
+    }
+
+    /// Set the state to a new value, using the current state value as a reference.
+    ///
+    /// This is similar to passing a closure to React's `set_value` function.
+    ///
+    /// # Examples
+    ///
+    /// Basic usage:
+    /// ```rust
+    /// # use dioxus_core::prelude::*;
+    /// # use dioxus_hooks::*;
+    /// fn component(cx: Scope) -> Element {
+    ///     let (value, set_value) = use_state(&cx, || 0);
+    ///    
+    ///     // to increment the value
+    ///     set_value.modify(|v| v + 1);
+    ///    
+    ///     // usage in async
+    ///     cx.spawn({
+    ///         let set_value = set_value.to_owned();
+    ///         async move {
+    ///             set_value.modify(|v| v + 1);
+    ///         }
+    ///     });
+    ///
+    ///     # todo!()
+    /// }
+    /// ```
+    pub fn modify(&self, f: impl FnOnce(&T) -> T) {
+        let curernt = self.slot.borrow();
+        let new_val = f(curernt.as_ref());
+        (self.setter)(new_val);
+    }
+
+    /// Get the value of the state when this handle was created.
+    ///
+    /// This method is useful when you want an `Rc` around the data to cheaply
+    /// pass it around your app.
+    ///
+    /// ## Warning
+    ///
+    /// This will return a stale value if used within async contexts.
+    ///
+    /// Try `current` to get the real current value of the state.
+    ///
+    /// ## Example
+    ///
+    /// ```rust, ignore
+    /// # use dioxus_core::prelude::*;
+    /// # use dioxus_hooks::*;
+    /// fn component(cx: Scope) -> Element {
+    ///     let (value, set_value) = use_state(&cx, || 0);
+    ///    
+    ///     let as_rc = set_value.get();
+    ///     assert_eq!(as_rc.as_ref(), &0);
+    ///
+    ///     # todo!()
+    /// }
+    /// ```
+    #[must_use]
+    pub fn get(&self) -> &Rc<T> {
+        &self.current_val
+    }
+
+    /// Mark the component that create this [`UseState`] as dirty, forcing it to re-render.
+    ///
+    /// ```rust, ignore
+    /// fn component(cx: Scope) -> Element {
+    ///     let (count, set_count) = use_state(&cx, || 0);
+    ///     cx.spawn({
+    ///         let set_count = set_count.to_owned();
+    ///         async move {
+    ///             // for the component to re-render
+    ///             set_count.needs_update();
+    ///         }
+    ///     })
+    /// }
+    /// ```   
+    pub fn needs_update(&self) {
+        (self.update_callback)();
+    }
+}
+
+impl<T: Clone> UseState<T> {
+    /// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
+    /// current value.
+    ///
+    /// This is essentially cloning the underlying value and then setting it,
+    /// giving you a mutable handle in the process. This method is intended for
+    /// types that are cheaply cloneable.
+    ///
+    /// If you are comfortable dealing with `RefMut`, then you can use `make_mut` to get
+    /// the underlying slot. However, be careful with `RefMut` since you might panic
+    /// if the `RefCell` is left open.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// let (val, set_val) = use_state(&cx, || 0);
+    ///
+    /// set_val.with_mut(|v| *v = 1);
+    /// ```
+    pub fn with_mut(&self, apply: impl FnOnce(&mut T)) {
+        let mut slot = self.slot.borrow_mut();
+        let mut inner = slot.as_ref().to_owned();
+
+        apply(&mut inner);
+
+        if let Some(new) = Rc::get_mut(&mut slot) {
+            *new = inner;
+        } else {
+            *slot = Rc::new(inner);
+        }
+
+        self.needs_update();
+    }
+
+    /// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
+    /// current value.
+    ///
+    /// This is essentially cloning the underlying value and then setting it,
+    /// giving you a mutable handle in the process. This method is intended for
+    /// types that are cheaply cloneable.
+    ///
+    /// # Warning
+    /// Be careful with `RefMut` since you might panic if the `RefCell` is left open!
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// let (val, set_val) = use_state(&cx, || 0);
+    ///
+    /// set_val.with_mut(|v| *v = 1);
+    /// ```
+    #[must_use]
+    pub fn make_mut(&self) -> RefMut<T> {
+        let mut slot = self.slot.borrow_mut();
+
+        self.needs_update();
+
+        if Rc::strong_count(&*slot) > 0 {
+            *slot = Rc::new(slot.as_ref().to_owned());
+        }
+
+        RefMut::map(slot, |rc| Rc::get_mut(rc).expect("the hard count to be 0"))
+    }
+}
+
+impl<T: 'static> ToOwned for UseState<T> {
+    type Owned = UseState<T>;
+
+    fn to_owned(&self) -> Self::Owned {
+        UseState {
+            current_val: self.current_val.clone(),
+            update_callback: self.update_callback.clone(),
+            setter: self.setter.clone(),
+            slot: self.slot.clone(),
+        }
+    }
+}
+
+impl<'a, T: 'static + Display> std::fmt::Display for UseState<T> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.current_val)
+    }
+}
+
+impl<T> PartialEq<UseState<T>> for UseState<T> {
+    fn eq(&self, other: &UseState<T>) -> bool {
+        // some level of memoization for UseState
+        Rc::ptr_eq(&self.slot, &other.slot)
+    }
+}
+
+impl<T: Debug> Debug for UseState<T> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{:?}", self.current_val)
+    }
+}
+
+impl<'a, T> std::ops::Deref for UseState<T> {
+    type Target = Rc<dyn Fn(T)>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.setter
+    }
+}
+
+#[test]
+fn api_makes_sense() {
+    #[allow(unused)]
+    fn app(cx: Scope) -> Element {
+        let (val, set_val) = use_state(&cx, || 0);
+
+        set_val(0);
+        set_val.modify(|v| v + 1);
+        let real_current = set_val.current();
+
+        match val {
+            10 => {
+                set_val(20);
+                set_val.modify(|v| v + 1);
+            }
+            20 => {}
+            _ => {
+                println!("{real_current}");
+            }
+        }
+
+        cx.spawn({
+            crate::to_owned![set_val];
+            async move {
+                set_val.modify(|f| f + 1);
+            }
+        });
+
+        cx.render(LazyNodes::new(|f| f.static_text("asd")))
+    }
+}

packages/hooks/src/usestate/handle.rs

@@ -1,215 +0,0 @@
-use super::owned::UseStateOwned;
-use std::{
-    cell::{Ref, RefMut},
-    fmt::{Debug, Display},
-    rc::Rc,
-};
-
-pub struct UseState<'a, T: 'static>(pub(crate) &'a UseStateOwned<T>);
-
-impl<T> Copy for UseState<'_, T> {}
-
-impl<'a, T: 'static> Clone for UseState<'a, T> {
-    fn clone(&self) -> Self {
-        UseState(self.0)
-    }
-}
-
-impl<T: Debug> Debug for UseState<'_, T> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{:?}", self.0.current_val)
-    }
-}
-
-impl<'a, T: 'static> UseState<'a, T> {
-    /// Tell the Dioxus Scheduler that we need to be processed
-    pub fn needs_update(&self) {
-        if !self.0.update_scheuled.get() {
-            self.0.update_scheuled.set(true);
-            (self.0.update_callback)();
-        }
-    }
-
-    pub fn set(&self, new_val: T) {
-        *self.0.wip.borrow_mut() = Some(new_val);
-        self.needs_update();
-    }
-
-    pub fn get(&self) -> &'a T {
-        &self.0.current_val
-    }
-
-    pub fn get_rc(&self) -> &'a Rc<T> {
-        &self.0.current_val
-    }
-
-    /// Get the current status of the work-in-progress data
-    pub fn get_wip(&self) -> Ref<Option<T>> {
-        self.0.wip.borrow()
-    }
-
-    /// Get the current status of the work-in-progress data
-    pub fn get_wip_mut(&self) -> RefMut<Option<T>> {
-        self.0.wip.borrow_mut()
-    }
-
-    pub fn classic(self) -> (&'a T, Rc<dyn Fn(T)>) {
-        (&self.0.current_val, self.setter())
-    }
-
-    pub fn setter(&self) -> Rc<dyn Fn(T)> {
-        let slot = self.0.wip.clone();
-        let callback = self.0.update_callback.clone();
-        Rc::new(move |new| {
-            callback();
-            *slot.borrow_mut() = Some(new)
-        })
-    }
-
-    pub fn with(&self, f: impl FnOnce(&mut T)) {
-        let mut val = self.0.wip.borrow_mut();
-
-        if let Some(inner) = val.as_mut() {
-            f(inner);
-        }
-    }
-
-    pub fn for_async(&self) -> UseStateOwned<T> {
-        let UseStateOwned {
-            current_val,
-            wip,
-            update_callback,
-            update_scheuled,
-        } = self.0;
-
-        UseStateOwned {
-            current_val: current_val.clone(),
-            wip: wip.clone(),
-            update_callback: update_callback.clone(),
-            update_scheuled: update_scheuled.clone(),
-        }
-    }
-}
-
-impl<'a, T: 'static + ToOwned<Owned = T>> UseState<'a, T> {
-    /// Gain mutable access to the new value via [`RefMut`].
-    ///
-    /// If `modify` is called, then the component will re-render.
-    ///
-    /// This method is only available when the value is a `ToOwned` type.
-    ///
-    /// Mutable access is derived by calling "ToOwned" (IE cloning) on the current value.
-    ///
-    /// To get a reference to the current value, use `.get()`
-    pub fn modify(self) -> RefMut<'a, T> {
-        // make sure we get processed
-        self.needs_update();
-
-        // Bring out the new value, cloning if it we need to
-        // "get_mut" is locked behind "ToOwned" to make it explicit that cloning occurs to use this
-        RefMut::map(self.0.wip.borrow_mut(), |slot| {
-            if slot.is_none() {
-                *slot = Some(self.0.current_val.as_ref().to_owned());
-            }
-            slot.as_mut().unwrap()
-        })
-    }
-
-    pub fn inner(self) -> T {
-        self.0.current_val.as_ref().to_owned()
-    }
-}
-
-impl<'a, T> std::ops::Deref for UseState<'a, T> {
-    type Target = T;
-
-    fn deref(&self) -> &Self::Target {
-        self.get()
-    }
-}
-
-// enable displaty for the handle
-impl<'a, T: 'static + Display> std::fmt::Display for UseState<'a, T> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{}", self.0.current_val)
-    }
-}
-impl<'a, V, T: PartialEq<V>> PartialEq<V> for UseState<'a, T> {
-    fn eq(&self, other: &V) -> bool {
-        self.get() == other
-    }
-}
-impl<'a, O, T: std::ops::Not<Output = O> + Copy> std::ops::Not for UseState<'a, T> {
-    type Output = O;
-
-    fn not(self) -> Self::Output {
-        !*self.get()
-    }
-}
-
-/*
-
-Convenience methods for UseState.
-
-Note!
-
-This is not comprehensive.
-This is *just* meant to make common operations easier.
-*/
-
-use std::ops::{Add, AddAssign, Div, DivAssign, Mul, MulAssign, Sub, SubAssign};
-
-impl<'a, T: Copy + Add<T, Output = T>> Add<T> for UseState<'a, T> {
-    type Output = T;
-
-    fn add(self, rhs: T) -> Self::Output {
-        self.0.current_val.add(rhs)
-    }
-}
-impl<'a, T: Copy + Add<T, Output = T>> AddAssign<T> for UseState<'a, T> {
-    fn add_assign(&mut self, rhs: T) {
-        self.set(self.0.current_val.add(rhs));
-    }
-}
-
-/// Sub
-impl<'a, T: Copy + Sub<T, Output = T>> Sub<T> for UseState<'a, T> {
-    type Output = T;
-
-    fn sub(self, rhs: T) -> Self::Output {
-        self.0.current_val.sub(rhs)
-    }
-}
-impl<'a, T: Copy + Sub<T, Output = T>> SubAssign<T> for UseState<'a, T> {
-    fn sub_assign(&mut self, rhs: T) {
-        self.set(self.0.current_val.sub(rhs));
-    }
-}
-
-/// MUL
-impl<'a, T: Copy + Mul<T, Output = T>> Mul<T> for UseState<'a, T> {
-    type Output = T;
-
-    fn mul(self, rhs: T) -> Self::Output {
-        self.0.current_val.mul(rhs)
-    }
-}
-impl<'a, T: Copy + Mul<T, Output = T>> MulAssign<T> for UseState<'a, T> {
-    fn mul_assign(&mut self, rhs: T) {
-        self.set(self.0.current_val.mul(rhs));
-    }
-}
-
-/// DIV
-impl<'a, T: Copy + Div<T, Output = T>> Div<T> for UseState<'a, T> {
-    type Output = T;
-
-    fn div(self, rhs: T) -> Self::Output {
-        self.0.current_val.div(rhs)
-    }
-}
-impl<'a, T: Copy + Div<T, Output = T>> DivAssign<T> for UseState<'a, T> {
-    fn div_assign(&mut self, rhs: T) {
-        self.set(self.0.current_val.div(rhs));
-    }
-}

packages/hooks/src/usestate/mod.rs

@@ -1,78 +0,0 @@
-mod handle;
-mod owned;
-pub use handle::*;
-pub use owned::*;
-
-use dioxus_core::prelude::*;
-use std::{
-    cell::{Cell, RefCell},
-    rc::Rc,
-};
-
-/// Store state between component renders!
-///
-/// ## Dioxus equivalent of useState, designed for Rust
-///
-/// The Dioxus version of `useState` for state management inside components. It allows you to ergonomically store and
-/// modify state between component renders. When the state is updated, the component will re-render.
-///
-/// Dioxus' use_state basically wraps a RefCell with helper methods and integrates it with the VirtualDOM update system.
-///
-/// [`use_state`] exposes a few helper methods to modify the underlying state:
-/// - `.set(new)` allows you to override the "work in progress" value with a new value
-/// - `.get_mut()` allows you to modify the WIP value
-/// - `.get_wip()` allows you to access the WIP value
-/// - `.deref()` provides the previous value (often done implicitly, though a manual dereference with `*` might be required)
-///
-/// Additionally, a ton of std::ops traits are implemented for the `UseState` wrapper, meaning any mutative type operations
-/// will automatically be called on the WIP value.
-///
-/// ## Combinators
-///
-/// On top of the methods to set/get state, `use_state` also supports fancy combinators to extend its functionality:
-/// - `.classic()` and `.split()`  convert the hook into the classic React-style hook
-///     ```rust
-///     let (state, set_state) = use_state(&cx, || 10).split()
-///     ```
-///
-///
-/// Usage:
-///
-/// ```ignore
-/// const Example: Component = |cx| {
-///     let counter = use_state(&cx, || 0);
-///
-///     cx.render(rsx! {
-///         div {
-///             h1 { "Counter: {counter}" }
-///             button { onclick: move |_| counter += 1, "Increment" }
-///             button { onclick: move |_| counter -= 1, "Decrement" }
-///         }
-///     ))
-/// }
-/// ```
-pub fn use_state<'a, T: 'static>(
-    cx: &'a ScopeState,
-    initial_state_fn: impl FnOnce() -> T,
-) -> UseState<'a, T> {
-    let hook = cx.use_hook(move |_| UseStateOwned {
-        current_val: Rc::new(initial_state_fn()),
-        update_callback: cx.schedule_update(),
-        wip: Rc::new(RefCell::new(None)),
-        update_scheuled: Cell::new(false),
-    });
-
-    hook.update_scheuled.set(false);
-    let mut new_val = hook.wip.borrow_mut();
-
-    if new_val.is_some() {
-        // if there's only one reference (weak or otherwise), we can just swap the values
-        if let Some(val) = Rc::get_mut(&mut hook.current_val) {
-            *val = new_val.take().unwrap();
-        } else {
-            hook.current_val = Rc::new(new_val.take().unwrap());
-        }
-    }
-
-    UseState(hook)
-}

packages/hooks/src/usestate/owned.rs

@@ -1,99 +0,0 @@
-use std::{
-    cell::{Cell, Ref, RefCell, RefMut},
-    fmt::{Debug, Display},
-    rc::Rc,
-};
-pub struct UseStateOwned<T: 'static> {
-    // this will always be outdated
-    pub(crate) current_val: Rc<T>,
-    pub(crate) wip: Rc<RefCell<Option<T>>>,
-    pub(crate) update_callback: Rc<dyn Fn()>,
-    pub(crate) update_scheuled: Cell<bool>,
-}
-
-impl<T> UseStateOwned<T> {
-    pub fn get(&self) -> Ref<Option<T>> {
-        self.wip.borrow()
-    }
-
-    pub fn set(&self, new_val: T) {
-        *self.wip.borrow_mut() = Some(new_val);
-        (self.update_callback)();
-    }
-
-    pub fn modify(&self) -> RefMut<Option<T>> {
-        (self.update_callback)();
-        self.wip.borrow_mut()
-    }
-}
-
-use std::ops::{Add, AddAssign, Div, DivAssign, Mul, MulAssign, Sub, SubAssign};
-
-impl<T: Debug> Debug for UseStateOwned<T> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{:?}", self.current_val)
-    }
-}
-
-// enable displaty for the handle
-impl<'a, T: 'static + Display> std::fmt::Display for UseStateOwned<T> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{}", self.current_val)
-    }
-}
-
-impl<'a, T: Copy + Add<T, Output = T>> Add<T> for UseStateOwned<T> {
-    type Output = T;
-
-    fn add(self, rhs: T) -> Self::Output {
-        self.current_val.add(rhs)
-    }
-}
-
-impl<'a, T: Copy + Add<T, Output = T>> AddAssign<T> for UseStateOwned<T> {
-    fn add_assign(&mut self, rhs: T) {
-        self.set(self.current_val.add(rhs));
-    }
-}
-
-/// Sub
-impl<'a, T: Copy + Sub<T, Output = T>> Sub<T> for UseStateOwned<T> {
-    type Output = T;
-
-    fn sub(self, rhs: T) -> Self::Output {
-        self.current_val.sub(rhs)
-    }
-}
-impl<'a, T: Copy + Sub<T, Output = T>> SubAssign<T> for UseStateOwned<T> {
-    fn sub_assign(&mut self, rhs: T) {
-        self.set(self.current_val.sub(rhs));
-    }
-}
-
-/// MUL
-impl<'a, T: Copy + Mul<T, Output = T>> Mul<T> for UseStateOwned<T> {
-    type Output = T;
-
-    fn mul(self, rhs: T) -> Self::Output {
-        self.current_val.mul(rhs)
-    }
-}
-impl<'a, T: Copy + Mul<T, Output = T>> MulAssign<T> for UseStateOwned<T> {
-    fn mul_assign(&mut self, rhs: T) {
-        self.set(self.current_val.mul(rhs));
-    }
-}
-
-/// DIV
-impl<'a, T: Copy + Div<T, Output = T>> Div<T> for UseStateOwned<T> {
-    type Output = T;
-
-    fn div(self, rhs: T) -> Self::Output {
-        self.current_val.div(rhs)
-    }
-}
-impl<'a, T: Copy + Div<T, Output = T>> DivAssign<T> for UseStateOwned<T> {
-    fn div_assign(&mut self, rhs: T) {
-        self.set(self.current_val.div(rhs));
-    }
-}