fix(example): preserve concurrent message and pagination updates

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 }) => {

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>
 

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 (

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 (

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");

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 }) => {