Fix stale state in callbacks when multiple events fire rapidly (#3796)

The UseReducerHandle was caching a snapshot of state at render time.
When set() was called, the underlying RefCell was updated, but callback
closures still held handles pointing to old snapshots. This caused
stale state reads when multiple events fired before a rerender.

The fix changes UseReducerHandle to:
1. Store both a reference to the shared RefCell AND a snapshot
2. Use try_borrow() to read from RefCell when possible
3. Fall back to snapshot when RefCell is borrowed (during dispatch)

This ensures callbacks see the latest state in normal operation while
avoiding panics when state is read during reducer execution (e.g., SSR).

Changes:
- UseReducerHandle now stores both current_state RefCell ref and snapshot
- Deref uses try_borrow with fallback to snapshot
- Updated Clone, Debug, PartialEq implementations
- Added regression test for the stale state scenario

Author: Madoshakalaka

packages/yew/src/functional/hooks/use_reducer.rs

@@ -35,7 +35,11 @@ pub struct UseReducerHandle<T>
 where
     T: Reducible,
 {
-    value: Rc<T>,
+    /// Shared mutable state - always contains the latest value
+    current_state: Rc<RefCell<Rc<T>>>,
+    /// Snapshot taken at handle creation, used as fallback when RefCell is borrowed
+    /// (e.g., during dispatch when the reducer is running)
+    snapshot: Rc<T>,
     dispatch: DispatchFn<T>,
 }
 
@@ -63,7 +67,22 @@ where
     type Target = T;
 
     fn deref(&self) -> &Self::Target {
-        &self.value
+        // Try to get the latest value from the shared RefCell.
+        // If it's currently borrowed (e.g., during dispatch/reduce), fall back to snapshot.
+        //
+        // SAFETY: This is safe because:
+        // 1. The Rc<T> (either from RefCell or snapshot) is kept alive by our references
+        // 2. Rc doesn't move its data, so the pointer is stable
+        // 3. We only hold the borrow briefly to get the pointer
+        if let Ok(rc_ref) = self.current_state.try_borrow() {
+            unsafe {
+                let ptr: *const T = Rc::as_ptr(&*rc_ref);
+                &*ptr
+            }
+        } else {
+            // RefCell is mutably borrowed (during dispatch), use snapshot
+            &self.snapshot
+        }
     }
 }
 
@@ -73,7 +92,8 @@ where
 {
     fn clone(&self) -> Self {
         Self {
-            value: Rc::clone(&self.value),
+            current_state: Rc::clone(&self.current_state),
+            snapshot: Rc::clone(&self.snapshot),
             dispatch: Rc::clone(&self.dispatch),
         }
     }
@@ -84,8 +104,13 @@ where
     T: Reducible + fmt::Debug,
 {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        let value = if let Ok(rc_ref) = self.current_state.try_borrow() {
+            format!("{:?}", *rc_ref)
+        } else {
+            format!("{:?}", self.snapshot)
+        };
         f.debug_struct("UseReducerHandle")
-            .field("value", &format!("{:?}", self.value))
+            .field("value", &value)
             .finish()
     }
 }
@@ -95,7 +120,8 @@ where
     T: Reducible + PartialEq,
 {
     fn eq(&self, rhs: &Self) -> bool {
-        self.value == rhs.value
+        // Compare using deref which handles the try_borrow logic
+        **self == **rhs
     }
 }
 
@@ -239,10 +265,15 @@ where
                 }
             });
 
-            let value = state.current_state.borrow().clone();
+            let current_state = state.current_state.clone();
+            let snapshot = state.current_state.borrow().clone();
             let dispatch = state.dispatch.clone();
 
-            UseReducerHandle { value, dispatch }
+            UseReducerHandle {
+                current_state,
+                snapshot,
+                dispatch,
+            }
         }
     }
 

packages/yew/src/functional/hooks/use_state.rs

@@ -109,7 +109,7 @@ pub struct UseStateHandle<T> {
 impl<T: fmt::Debug> fmt::Debug for UseStateHandle<T> {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         f.debug_struct("UseStateHandle")
-            .field("value", &format!("{:?}", self.inner.value))
+            .field("value", &format!("{:?}", **self))
             .finish()
     }
 }
@@ -132,7 +132,7 @@ impl<T> Deref for UseStateHandle<T> {
     type Target = T;
 
     fn deref(&self) -> &Self::Target {
-        &(*self.inner).value
+        &self.inner.value
     }
 }
 

packages/yew/tests/use_state.rs

@@ -106,3 +106,113 @@ async fn use_state_eq_works() {
     assert_eq!(result.as_str(), "1");
     assert_eq!(RENDER_COUNT.load(Ordering::Relaxed), 2);
 }
+
+/// Regression test for issue #3796
+/// Tests that state handles always read the latest value even when accessed
+/// from callbacks before a rerender occurs.
+///
+/// The bug occurred when:
+/// 1. State A is updated via set()
+/// 2. State B is updated via set()
+/// 3. A callback reads both states before rerender
+/// 4. The callback would see stale value for B because the handle was caching a snapshot instead of
+///    reading from the RefCell
+#[wasm_bindgen_test]
+async fn use_state_handles_read_latest_value_issue_3796() {
+    use std::cell::RefCell;
+
+    use gloo::utils::document;
+    use wasm_bindgen::JsCast;
+    use web_sys::HtmlElement;
+
+    // Shared storage for the values read by the submit handler
+    thread_local! {
+        static CAPTURED_VALUES: RefCell<Option<(String, String)>> = const { RefCell::new(None) };
+    }
+
+    #[component(FormComponent)]
+    fn form_comp() -> Html {
+        let field_a = use_state(String::new);
+        let field_b = use_state(String::new);
+
+        let update_a = {
+            let field_a = field_a.clone();
+            Callback::from(move |_| {
+                field_a.set("value_a".to_string());
+            })
+        };
+
+        let update_b = {
+            let field_b = field_b.clone();
+            Callback::from(move |_| {
+                field_b.set("value_b".to_string());
+            })
+        };
+
+        // This callback reads both states - the bug caused field_b to be stale
+        let submit = {
+            let field_a = field_a.clone();
+            let field_b = field_b.clone();
+            Callback::from(move |_| {
+                let a = (*field_a).clone();
+                let b = (*field_b).clone();
+                CAPTURED_VALUES.with(|v| {
+                    *v.borrow_mut() = Some((a.clone(), b.clone()));
+                });
+            })
+        };
+
+        html! {
+            <div>
+                <button id="update-a" onclick={update_a}>{"Update A"}</button>
+                <button id="update-b" onclick={update_b}>{"Update B"}</button>
+                <button id="submit" onclick={submit}>{"Submit"}</button>
+                <div id="result">{format!("a={}, b={}", *field_a, *field_b)}</div>
+            </div>
+        }
+    }
+
+    yew::Renderer::<FormComponent>::with_root(document().get_element_by_id("output").unwrap())
+        .render();
+    sleep(Duration::ZERO).await;
+
+    // Initial state
+    let result = obtain_result();
+    assert_eq!(result.as_str(), "a=, b=");
+
+    // Click update-a, then update-b, then submit WITHOUT waiting for rerender
+    // This simulates rapid user interaction (like the Firefox bug in issue #3796)
+    document()
+        .get_element_by_id("update-a")
+        .unwrap()
+        .unchecked_into::<HtmlElement>()
+        .click();
+
+    document()
+        .get_element_by_id("update-b")
+        .unwrap()
+        .unchecked_into::<HtmlElement>()
+        .click();
+
+    document()
+        .get_element_by_id("submit")
+        .unwrap()
+        .unchecked_into::<HtmlElement>()
+        .click();
+
+    // Now wait for rerenders to complete
+    sleep(Duration::ZERO).await;
+
+    // Check the values captured by the submit handler
+    // Before the fix, field_b would be empty because the callback captured a stale handle
+    let captured = CAPTURED_VALUES.with(|v| v.borrow().clone());
+    assert_eq!(
+        captured,
+        Some(("value_a".to_string(), "value_b".to_string())),
+        "Submit handler should see latest values for both fields"
+    );
+
+    // Also verify the DOM shows correct values after rerender
+    let result = obtain_result();
+    assert_eq!(result.as_str(), "a=value_a, b=value_b");
+}