From ee034158948588295a593a5b48bf8a3fcd745a56 Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Fri, 21 Feb 2025 15:09:25 -0800
Subject: [PATCH] fix autoscroll on stateful children (#4858)

---
 reflex/components/core/auto_scroll.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/reflex/components/core/auto_scroll.py b/reflex/components/core/auto_scroll.py
index d24bd9a13..8ae0df07d 100644
--- a/reflex/components/core/auto_scroll.py
+++ b/reflex/components/core/auto_scroll.py
@@ -11,7 +11,9 @@ from reflex.vars.base import Var, get_unique_variable_name
 class AutoScroll(Div):
     """A div that automatically scrolls to the bottom when new content is added."""
 
-    _memoization_mode = MemoizationMode(disposition=MemoizationDisposition.ALWAYS)
+    _memoization_mode = MemoizationMode(
+        disposition=MemoizationDisposition.ALWAYS, recursive=False
+    )
 
     @classmethod
     def create(cls, *children, **props):
@@ -44,7 +46,6 @@ class AutoScroll(Div):
         """
         ref_name = self.get_ref()
         return [
-            "const containerRef = useRef(null);",
             "const wasNearBottom = useRef(false);",
             "const hadScrollbar = useRef(false);",
             f"""
@@ -85,6 +86,8 @@ useEffect(() => {{
     const container = {ref_name}.current;
     if (!container) return;
 
+    scrollToBottomIfNeeded();
+
     // Create ResizeObserver to detect height changes
     const resizeObserver = new ResizeObserver(() => {{
         scrollToBottomIfNeeded();