From 2f93d6c17813db3904a74439c93152648a4956d3 Mon Sep 17 00:00:00 2001
From: Oskar Eichler <62393985+OskarEichler@users.noreply.github.com>
Date: Fri, 28 Aug 2026 06:33:56 +0300
Subject: [PATCH] fix(example): preserve concurrent message and pagination
 updates

Use functional state for appending/prepending messages and pages, compute new chat messages from current rather than captured lengths, and label the unstable-chat scroll control with its actual target index.
---
 fixture/react-native/src/Chat.tsx                      | 4 +---
 fixture/react-native/src/ChatUnstableItems.tsx         | 6 +++---
 fixture/react-native/src/Messages/Messages.tsx         | 2 +-
 fixture/react-native/src/Messages/MessagesFlatList.tsx | 2 +-
 fixture/react-native/src/PaginatedList.tsx             | 8 +++-----
 fixture/web/Chat.tsx                                   | 4 +---
 6 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/fixture/react-native/src/Chat.tsx b/fixture/react-native/src/Chat.tsx
index 56bc48421..42a06d991 100644
--- a/fixture/react-native/src/Chat.tsx
+++ b/fixture/react-native/src/Chat.tsx
@@ -42,9 +42,7 @@ export function Chat() {
   }, []);
 
   const addMessageAtBottom = useCallback(() => {
-    const newMessage = generateRandomMessage(messages.length);
-    setMessages((prev) => [...prev, newMessage]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setMessages((prev) => [...prev, generateRandomMessage(prev.length)]);
   }, []);
 
   const renderItem = useCallback((info: { item: ChatMessage }) => {
diff --git a/fixture/react-native/src/ChatUnstableItems.tsx b/fixture/react-native/src/ChatUnstableItems.tsx
index c633927d4..8cf5f72dd 100644
--- a/fixture/react-native/src/ChatUnstableItems.tsx
+++ b/fixture/react-native/src/ChatUnstableItems.tsx
@@ -81,7 +81,7 @@ export function ChatUnstableItems() {
     return () => clearTimeout(id);
   }, [scrollTarget]);
 
-  const scrollToItem25 = useCallback(() => {
+  const scrollToItem150 = useCallback(() => {
     setScrollTarget(150);
   }, []);
 
@@ -131,9 +131,9 @@ export function ChatUnstableItems() {
 
           <Pressable
             style={[styles.button, styles.scrollButton]}
-            onPress={scrollToItem25}
+            onPress={scrollToItem150}
           >
-            <Text style={styles.buttonText}>Scroll to 25</Text>
+            <Text style={styles.buttonText}>Scroll to 150</Text>
           </Pressable>
         </View>
 
diff --git a/fixture/react-native/src/Messages/Messages.tsx b/fixture/react-native/src/Messages/Messages.tsx
index 9c73dba2c..bdff28a48 100644
--- a/fixture/react-native/src/Messages/Messages.tsx
+++ b/fixture/react-native/src/Messages/Messages.tsx
@@ -19,7 +19,7 @@ const Messages = () => {
       sender: userName,
       type: MessageType.Text,
     } as Message;
-    setMessages([...messages, message]);
+    setMessages((previous) => [...previous, message]);
   };
 
   return (
diff --git a/fixture/react-native/src/Messages/MessagesFlatList.tsx b/fixture/react-native/src/Messages/MessagesFlatList.tsx
index cc0789b6e..75ab68795 100644
--- a/fixture/react-native/src/Messages/MessagesFlatList.tsx
+++ b/fixture/react-native/src/Messages/MessagesFlatList.tsx
@@ -24,7 +24,7 @@ const MessagesFlatList = () => {
       type: MessageType.Text,
     } as Message;
 
-    setMessages([message, ...messages]);
+    setMessages((previous) => [message, ...previous]);
   };
 
   return (
diff --git a/fixture/react-native/src/PaginatedList.tsx b/fixture/react-native/src/PaginatedList.tsx
index 923a96362..029b206fe 100644
--- a/fixture/react-native/src/PaginatedList.tsx
+++ b/fixture/react-native/src/PaginatedList.tsx
@@ -47,11 +47,9 @@ export default class PaginatedList extends React.Component<PaginatedListState> {
         onEndReached={() => {
           console.log("onEndReached");
           // Since FlatList is a pure component, data reference should change for a render
-          const elems = [...this.state.elems];
-          elems.push(...this._generateArray(elems.length, 20));
-          this.setState(() => {
-            return { elems };
-          });
+          this.setState(({ elems }: PaginatedListState) => ({
+            elems: [...elems, ...this._generateArray(elems.length, 20)],
+          }));
         }}
         onStartReached={() => {
           console.log("onStartReached");
diff --git a/fixture/web/Chat.tsx b/fixture/web/Chat.tsx
index 56bc48421..42a06d991 100644
--- a/fixture/web/Chat.tsx
+++ b/fixture/web/Chat.tsx
@@ -42,9 +42,7 @@ export function Chat() {
   }, []);
 
   const addMessageAtBottom = useCallback(() => {
-    const newMessage = generateRandomMessage(messages.length);
-    setMessages((prev) => [...prev, newMessage]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setMessages((prev) => [...prev, generateRandomMessage(prev.length)]);
   }, []);
 
   const renderItem = useCallback((info: { item: ChatMessage }) => {