perf: implement RAF based coalescing

Author: isekovanic

package/src/components/MessageList/MessageList.tsx

@@ -338,10 +338,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const maintainVisibleContentPosition = useMemo(
     () => ({
-      autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
+      autoscrollToTopThreshold: 64,
       minIndexForVisible,
     }),
-    [autoscrollToRecent, minIndexForVisible],
+    [minIndexForVisible],
   );
 
   /**
@@ -1218,7 +1218,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
+          scrollEventThrottle={16}
           showsVerticalScrollIndicator={false}
+          // @ts-expect-error react-native internal
+          strictMode={true}
           style={flatListStyle}
           testID='message-flat-list'
           viewabilityConfig={flatListViewabilityConfig}

package/src/components/MessageList/hooks/useMessageList.ts

@@ -11,6 +11,7 @@ import {
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
+import { useRafCoalescedValue } from '../../../hooks';
 import { DateSeparators, getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
 
@@ -110,14 +111,19 @@ export const useMessageList = (params: UseMessageListParams) => {
     return newMessageList;
   }, [client.userID, deletedMessagesVisibilityType, messageList]);
 
-  return {
-    /** Date separators */
-    dateSeparatorsRef,
-    /** Message group styles */
-    messageGroupStylesRef,
-    /** Messages enriched with dates/readby/groups and also reversed in order */
-    processedMessageList,
-    /** Raw messages from the channel state */
-    rawMessageList: messageList,
-  };
+  const data = useRafCoalescedValue(processedMessageList);
+
+  return useMemo(
+    () => ({
+      /** Date separators */
+      dateSeparatorsRef,
+      /** Message group styles */
+      messageGroupStylesRef,
+      /** Messages enriched with dates/readby/groups and also reversed in order */
+      processedMessageList: data,
+      /** Raw messages from the channel state */
+      rawMessageList: messageList,
+    }),
+    [data, messageList],
+  );
 };

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useMessageReminder';
 export * from './useQueryReminders';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
+export * from './useRafCoalescedValue';

package/src/hooks/useRafCoalescedValue.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Coalesce a fast-changing value so React consumers only see updates:
+ *  - at most once per animation frame (RAF), and
+ *  - optionally no more often than `minIntervalMs`.
+ */
+export const useRafCoalescedValue = <S>(value: S): S => {
+  const [emitted, setEmitted] = useState<S>(value);
+  const pendingRef = useRef<S>(value);
+  const rafIdRef = useRef<number | 0>(0 as const);
+
+  // If `value` changes, schedule a single RAF to publish the latest one.
+  useEffect(() => {
+    if (value === pendingRef.current) return;
+    pendingRef.current = value;
+
+    if (rafIdRef.current) return; // already scheduled this frame
+
+    const run = () => {
+      rafIdRef.current = 0;
+      setEmitted(pendingRef.current);
+    };
+
+    rafIdRef.current = requestAnimationFrame(run);
+
+    return () => {
+      // cancel the frame if needed
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = 0;
+      }
+    };
+  }, [value]);
+
+  return emitted;
+};