fix: optionally disable raf coalescing

Author: isekovanic

package/src/components/MessageList/MessageList.tsx

@@ -226,7 +226,9 @@ type MessageListPropsWithContext = Pick<
      * If true, the message list will be used in a live-streaming scenario.
      * This flag is used to make sure that the auto scroll behaves well, if multiple messages are received.
      *
-     * This flag is experimental and is subject to change.
+     * This flag is experimental and is subject to change. Please test thoroughly before using it.
+     *
+     * @experimental
      */
     isLiveStreaming?: boolean;
   };
@@ -1238,7 +1240,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           scrollEventThrottle={isLiveStreaming ? 16 : undefined}
           showsVerticalScrollIndicator={false}
           // @ts-expect-error react-native internal
-          strictMode={isLiveStreaming ? true : false}
+          strictMode={isLiveStreaming}
           style={flatListStyle}
           testID='message-flat-list'
           viewabilityConfig={flatListViewabilityConfig}

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

@@ -112,9 +112,7 @@ export const useMessageList = (params: UseMessageListParams) => {
     return newMessageList;
   }, [client.userID, deletedMessagesVisibilityType, messageList]);
 
-  const rafColeasedProcessedMessageList = useRAFCoalescedValue(processedMessageList);
-
-  const data = isLiveStreaming ? rafColeasedProcessedMessageList : processedMessageList;
+  const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 
   return useMemo(
     () => ({

package/src/hooks/useRAFCoalescedValue.ts

@@ -36,16 +36,19 @@ import { useEffect, useRef, useState } from 'react';
  * - Do not cancel/reschedule on prop changes; cancellation is handled on unmount only.
  *
  * @param value The upstream value that may change multiple times within a single frame.
+ * @param isEnabled Determines whether the hook should be run or not (useful for cases where
+ * we want to conditionally use RAF when certain feature feature flags are enabled). If `false`,
+ * it will simply pass the data through (maintaining the reference as well).
  * @returns A value that updates **at most once per frame** with the latest input.
  */
-export const useRAFCoalescedValue = <S>(value: S): S => {
+export const useRAFCoalescedValue = <S>(value: S, isEnabled: boolean | undefined): S => {
   const [emitted, setEmitted] = useState<S>(value);
   const pendingRef = useRef<S>(value);
   const rafIdRef = useRef<number | null>(null);
 
   // If `value` changes, schedule a single RAF to publish the latest one.
   useEffect(() => {
-    if (value === pendingRef.current) return;
+    if (value === pendingRef.current || !isEnabled) return;
     pendingRef.current = value;
 
     // already scheduled the next frame, skip
@@ -57,7 +60,7 @@ export const useRAFCoalescedValue = <S>(value: S): S => {
     };
 
     rafIdRef.current = requestAnimationFrame(run);
-  }, [value]);
+  }, [value, isEnabled]);
 
   useEffect(() => {
     return () => {
@@ -69,5 +72,5 @@ export const useRAFCoalescedValue = <S>(value: S): S => {
     };
   }, []);
 
-  return emitted;
+  return isEnabled ? emitted : value;
 };