Fix local client state across sibling components

news/+7426.bugfix.md

@@ -0,0 +1 @@
+Calling a page-local client state setter from a sibling component no longer raises a `ReferenceError` or leaves the displayed value unchanged.

packages/reflex-base/news/+7426.bugfix.md

@@ -0,0 +1 @@
+Calling a page-local client state setter from a sibling component no longer raises a `ReferenceError` or leaves the displayed value unchanged.

packages/reflex-base/src/reflex_base/plugins/compiler.py

@@ -605,6 +605,14 @@ class PageContext(BaseContext):
     # the matching ``leave_component``. Non-empty iff we are inside such a
     # subtree.
     memoize_suppressor_stack: list[int] = dataclasses.field(default_factory=list)
+    # Number of components using each page-local hook scope shared across
+    # multiple components. Memoization boundaries must not split these scopes.
+    memoize_shared_scope_counts: dict[str, int] = dataclasses.field(
+        default_factory=dict
+    )
+    # Snapshot candidates whose subtree contains only part of a shared local
+    # hook scope, computed once when the root component is visited.
+    memoize_shared_scope_split_ids: set[int] = dataclasses.field(default_factory=set)
     # Maps both the user-owned original's ``id()`` and the clone's ``id()`` to
     # the page-local clone. Lets the walker and plugins rebind children, style,
     # or event_triggers on a page-local copy without mutating a user-owned
@@ -615,6 +623,9 @@ class PageContext(BaseContext):
     # garbage collected, and Python may recycle its ``id()`` for a fresh
     # component, causing ``own()`` to hand back the wrong clone.
     _owned_refs: list[BaseComponent] = dataclasses.field(default_factory=list)
+    # Original component identity for page-owned clones, used by compiler passes
+    # whose prepasses run before plugins create those clones.
+    _owned_original_ids: dict[int, int] = dataclasses.field(default_factory=dict)
 
     def own(self, comp: _BaseComponentT) -> _BaseComponentT:
         """Return a page-local copy of ``comp``, cloning on first encounter.
@@ -636,6 +647,9 @@ def own(self, comp: _BaseComponentT) -> _BaseComponentT:
         self._owned[id(comp)] = new
         self._owned[id(new)] = new
         self._owned_refs.append(comp)
+        self._owned_original_ids[id(new)] = self._owned_original_ids.get(
+            id(comp), id(comp)
+        )
         return new
 
     def merged_imports(self, *, collapse: bool = False) -> ParsedImportDict:

packages/reflex-base/src/reflex_base/vars/base.py

@@ -356,6 +356,9 @@ class VarData:
         default_factory=tuple
     )
 
+    # Hook scopes that must remain together across every use of the same Var.
+    shared_scope_keys: tuple[str, ...] = ()
+
     def __init__(
         self,
         state: str = "",
@@ -367,6 +370,7 @@ def __init__(
         components: Iterable[BaseComponent] | None = None,
         app_wraps: Iterable[tuple[int, BaseComponent]] | None = None,
         field_dependencies: Mapping[str, Iterable[str]] | None = None,
+        shared_scope_keys: Iterable[str] | None = None,
     ):
         """Initialize the var data.
 
@@ -387,6 +391,8 @@ def __init__(
                 and ``field_name`` are the shorthand for a single state with a
                 single field. Keyword-only in practice: it trails the older
                 parameters so positional callers of those are unaffected.
+            shared_scope_keys: Identifiers for hook scopes that must stay
+                together across every use of this var.
         """
         if position is not None:
             console.deprecate(
@@ -413,6 +419,11 @@ def __init__(
         object.__setattr__(self, "deps", tuple(deps or []))
         object.__setattr__(self, "components", tuple(components or []))
         object.__setattr__(self, "app_wraps", tuple(app_wraps or []))
+        object.__setattr__(
+            self,
+            "shared_scope_keys",
+            tuple(dict.fromkeys(shared_scope_keys or ())),
+        )
 
         if hooks and any(hooks.values()):
             # Merge our dependencies first, so they can be referenced.
@@ -428,6 +439,11 @@ def __init__(
                 object.__setattr__(self, "deps", merged_var_data.deps)
                 object.__setattr__(self, "components", merged_var_data.components)
                 object.__setattr__(self, "app_wraps", merged_var_data.app_wraps)
+                object.__setattr__(
+                    self,
+                    "shared_scope_keys",
+                    merged_var_data.shared_scope_keys,
+                )
 
     @property
     def state(self) -> str:
@@ -532,6 +548,13 @@ def merge(*all: VarData | None) -> VarData | None:
             app_wraps=tuple(
                 (priority, wrapper) for (priority, _tag), wrapper in app_wraps.items()
             ),
+            shared_scope_keys=tuple(
+                dict.fromkeys(
+                    key
+                    for var_data in all_var_datas
+                    for key in var_data.shared_scope_keys
+                )
+            ),
         )
 
     def __bool__(self) -> bool:
@@ -547,6 +570,7 @@ def __bool__(self) -> bool:
             or self.deps
             or self.components
             or self.app_wraps
+            or self.shared_scope_keys
         )
 
     @functools.cached_property
@@ -577,6 +601,7 @@ def _identity_key(self) -> tuple:
                 (priority, component.tag or type(component).__name__)
                 for priority, component in self.app_wraps
             ),
+            self.shared_scope_keys,
         )
 
     def __eq__(self, other: object) -> bool:

reflex/compiler/plugins/builtin.py

@@ -468,7 +468,7 @@ def default_page_plugins(
     chain: list[Plugin] = [*plugins, DefaultPagePlugin()]
     if style is not None:
         chain.append(ApplyStylePlugin(style=style))
-    chain.extend((DefaultCollectorPlugin(), MemoizeStatefulPlugin()))
+    chain.extend((DefaultCollectorPlugin(), MemoizeStatefulPlugin(style=style)))
     return tuple(chain)