Do not memoize parent component of Foreach (#6454)

* Do not memoize parent component of Foreach

Avoid issue where broader-than-needed SNAPSHOT memoization was occuring when
these components should have been memoized separately.

* add test case test_foreach_parent_does_not_absorb_sibling_into_snapshot

Author: masenf

AGENTS.md

@@ -46,6 +46,7 @@ docs/                   # documentation site (separate workspace member)
 - No block comments (`# --- Section ---`, `# ============`). Plain inline comments only.
 - Be cautious creating new public APIs — they must be documented and supported long-term.
 - Google-style docstrings on all functions: one-line summary, optional detail sentence(s), then Args/Returns (or Yields)/Raises.
+- Prefer imports at the top of the module in isort order. Only use inline imports when necessary to avoid circular dependencies.
 
 ## Testing
 

packages/reflex-base/src/reflex_base/components/memoize_helpers.py

@@ -214,26 +214,6 @@ def _is_structural_memoization_child(component: Component) -> bool:
     return bool(isinstance(component, Foreach))
 
 
-def _has_memoization_snapshot_child(component: Component) -> bool:
-    """Whether ``component`` has a structural child that needs a memo snapshot.
-
-    Component-valued ``Foreach`` is a structural form, not an ordinary user
-    child. It must render its body in the memo module instead of flowing
-    through as a normal ``children`` payload.
-
-    Args:
-        component: The component whose direct children should be inspected.
-
-    Returns:
-        True when a direct child requires the parent memo wrapper to render a
-        captured snapshot.
-    """
-    return any(
-        isinstance(child, Component) and _is_structural_memoization_child(child)
-        for child in component.children
-    )
-
-
 def passthrough_children_var(
     children: list[BaseComponent],
 ) -> ArrayVar[list[BaseComponent]] | None:
@@ -275,11 +255,7 @@ def get_memoization_strategy(component: Component) -> MemoizationStrategy:
     Returns:
         The strategy to use when generating a memo wrapper.
     """
-    if (
-        is_snapshot_boundary(component)
-        or _is_structural_memoization_child(component)
-        or _has_memoization_snapshot_child(component)
-    ):
+    if is_snapshot_boundary(component) or _is_structural_memoization_child(component):
         return MemoizationStrategy.SNAPSHOT
 
     return MemoizationStrategy.PASSTHROUGH

reflex/compiler/plugins/memoize.py

@@ -30,6 +30,7 @@
 )
 from reflex_base.components.memoize_helpers import (
     MemoizationStrategy,
+    _is_structural_memoization_child,
     fix_event_triggers_for_memo,
     get_memoization_strategy,
     is_snapshot_boundary,
@@ -188,8 +189,16 @@ def _should_memoize(component: Component) -> bool:
                 ):
                     return True
     # Cond and Match render conditional branch JSX from their own props rather
-    # than from a tag, so they have no `tag` but still must be considered.
-    if component.tag is None and not isinstance(component, (Cond, Match)):
+    # than from a tag; structural memoization children (e.g. ``Foreach``)
+    # render via their own structural form. All have no ``tag`` but still
+    # must be considered for memoization — the structural-child case in
+    # particular owns its whole subtree as a snapshot, so if it does not
+    # wrap here, its descendants leak to the page module.
+    if (
+        component.tag is None
+        and not isinstance(component, (Cond, Match))
+        and not _is_structural_memoization_child(component)
+    ):
         return False
     if component._memoization_mode.disposition == MemoizationDisposition.ALWAYS:
         return True

tests/units/compiler/test_memoize_plugin.py

@@ -8,18 +8,20 @@
 from typing import Any, cast
 
 import pytest
-from reflex_base.components.component import Component, field
+from reflex_base.components.component import Component
+from reflex_base.components.component import field as component_field
 from reflex_base.components.memoize_helpers import (
     MemoizationStrategy,
     get_memoization_strategy,
 )
 from reflex_base.constants.compiler import MemoizationDisposition, MemoizationMode
 from reflex_base.plugins import CompileContext, CompilerHooks, PageContext
 from reflex_base.vars import VarData
-from reflex_base.vars.base import LiteralVar, Var
+from reflex_base.vars.base import Field, LiteralVar, Var, field
 from reflex_components_core.base.bare import Bare
 from reflex_components_core.base.fragment import Fragment
 from reflex_components_core.base.link import RawLink, ScriptTag
+from reflex_components_core.core.foreach import Foreach
 from reflex_components_core.el.elements.forms import BaseInput, Textarea
 from reflex_components_core.el.elements.inline import Br, Wbr
 from reflex_components_core.el.elements.media import (
@@ -37,13 +39,15 @@
 from reflex_components_core.el.elements.scripts import Noscript, Script
 from reflex_components_core.el.elements.tables import Col
 from reflex_components_core.el.elements.typography import Hr
+from reflex_components_radix.themes.layout.box import Box
 
 import reflex as rx
 import reflex.compiler.plugins.memoize as memoize_plugin
 from reflex.compiler.plugins import DefaultCollectorPlugin, default_page_plugins
 from reflex.compiler.plugins.memoize import MemoizeStatefulPlugin, _should_memoize
 from reflex.experimental.memo import (
     ExperimentalMemoComponent,
+    ExperimentalMemoComponentDefinition,
     create_passthrough_component_memo,
 )
 from reflex.state import BaseState
@@ -62,7 +66,7 @@ class WithProp(Component):
     tag = "WithProp"
     library = "with-prop-lib"
 
-    label: Var[str] = field(default=LiteralVar.create(""))
+    label: Var[str] = component_field(default=LiteralVar.create(""))
 
 
 class LeafComponent(Component):
@@ -72,9 +76,9 @@ class LeafComponent(Component):
 
 
 class SpecialFormMemoState(BaseState):
-    items: list[str] = ["a"]
-    flag: bool = True
-    value: str = "a"
+    items: Field[list[str]] = field(default_factory=lambda: ["a"])
+    flag: Field[bool] = field(default=True)
+    value: Field[str] = field(default="a")
 
 
 @dataclasses.dataclass(slots=True)
@@ -251,9 +255,61 @@ def special_child() -> Component:
     assert body_marker not in page_output
 
 
+def test_foreach_parent_does_not_absorb_sibling_into_snapshot() -> None:
+    """Foreach owns its own snapshot while the parent stays passthrough.
+
+    Regression for the foreach-parent memoization fix: a parent component
+    holding a Foreach used to be promoted to SNAPSHOT, absorbing any sibling
+    reactive content into the same wide memo body. The parent should now render
+    on the page side, with Foreach and any reactive sibling each getting their
+    own independent wrapper.
+    """
+    ctx, _page_ctx = _compile_single_page(
+        lambda: rx.box(
+            Bare.create(SpecialFormMemoState.items.length()),
+            rx.foreach(
+                SpecialFormMemoState.items,
+                lambda item: rx.text(item),
+            ),
+        )
+    )
+
+    wrapped_definitions = [
+        definition
+        for definition in ctx.auto_memo_components.values()
+        if isinstance(definition, ExperimentalMemoComponentDefinition)
+    ]
+    wrapped_types = {type(definition.component) for definition in wrapped_definitions}
+
+    assert len(wrapped_definitions) == 2
+    assert Box not in wrapped_types
+
+    foreach_definition = next(
+        definition
+        for definition in wrapped_definitions
+        if isinstance(definition.component, Foreach)
+    )
+    assert (
+        get_memoization_strategy(foreach_definition.component)
+        is MemoizationStrategy.SNAPSHOT
+    )
+
+    bare_definition = next(
+        definition
+        for definition in wrapped_definitions
+        if isinstance(definition.component, Bare)
+    )
+    assert (
+        get_memoization_strategy(bare_definition.component)
+        is MemoizationStrategy.PASSTHROUGH
+    )
+    assert bare_definition is not foreach_definition
+
+
 def test_common_memoization_snapshot_helper_classifies_snapshot_cases() -> None:
     """The shared memoization strategy classifies structural render forms."""
     from reflex_components_core.core.cond import Cond
+    from reflex_components_core.core.foreach import Foreach
     from reflex_components_core.core.match import Match
     from reflex_components_core.el.elements.forms import Form, Input
 
@@ -280,7 +336,13 @@ def test_common_memoization_snapshot_helper_classifies_snapshot_cases() -> None:
         ),
     )
 
-    assert get_memoization_strategy(foreach_parent) is MemoizationStrategy.SNAPSHOT
+    # A parent with a structural-memoization child (Foreach) is itself
+    # PASSTHROUGH — the snapshotting is owned by the structural child, which
+    # captures its whole subtree.
+    assert get_memoization_strategy(foreach_parent) is MemoizationStrategy.PASSTHROUGH
+    foreach_child = foreach_parent.children[0]
+    assert isinstance(foreach_child, Foreach)
+    assert get_memoization_strategy(foreach_child) is MemoizationStrategy.SNAPSHOT
     assert get_memoization_strategy(cond_fragment) is MemoizationStrategy.PASSTHROUGH
     # Cond and Match now use passthrough so branch JSX renders on the page side
     # and the memo body just selects via children[i] indexing.