fix: state break on channel prop update (#2957)

* fix: Channel and MessageList state breaking completely if the channel prop gets updated

* fix: broken hook deps

* chore: remove redundant log

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
@@ -749,18 +749,20 @@ const ChannelWithContext = <
       ? newMessageStateUpdateThrottleInterval
       : stateUpdateThrottleInterval;
 
-  const copyChannelState = useRef(
-    throttle(
-      () => {
-        if (channel) {
-          copyStateFromChannel(channel);
-          copyMessagesStateFromChannel(channel);
-        }
-      },
-      copyChannelStateThrottlingTime,
-      throttleOptions,
-    ),
-  ).current;
+  const copyChannelState = useMemo(
+    () =>
+      throttle(
+        () => {
+          if (channel) {
+            copyStateFromChannel(channel);
+            copyMessagesStateFromChannel(channel);
+          }
+        },
+        copyChannelStateThrottlingTime,
+        throttleOptions,
+      ),
+    [channel, copyChannelStateThrottlingTime, copyMessagesStateFromChannel, copyStateFromChannel],
+  );
 
   const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
     if (shouldSyncChannel) {

package/src/components/MessageList/MessageList.tsx

@@ -579,7 +579,7 @@ const MessageListWithContext = <
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rawMessageList, threadList]);
+  }, [channel, rawMessageList, threadList]);
 
   const goToMessage = async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
@@ -1097,12 +1097,13 @@ const MessageListWithContext = <
           keyboardShouldPersistTaps='handled'
           keyExtractor={keyExtractor}
           ListFooterComponent={ListFooterComponent}
+          ListHeaderComponent={ListHeaderComponent}
           /**
-            if autoscrollToTopThreshold is 10, we scroll to recent if before new list update it was already at the bottom (10 offset or below)
-            minIndexForVisible = 1 means that beyond item at index 1 will not change position on list updates
-            minIndexForVisible is not used when autoscrollToTopThreshold = 10
+            If autoscrollToTopThreshold is 10, we scroll to recent only if before the update, the list was already at the
+            bottom (10 offset or below).
+            minIndexForVisible = 1 means that beyond the item at index 1 we will not change the position on list updates,
+            however it is not used when autoscrollToTopThreshold = 10.
           */
-          ListHeaderComponent={ListHeaderComponent}
           maintainVisibleContentPosition={{
             autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
             minIndexForVisible: 1,

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

@@ -38,8 +38,7 @@ export function useShouldScrollToRecentOnNewOwnMessage<
         }
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rawMessageList]);
+  }, [currentUserId, rawMessageList]);
 
   return isMyOwnNewMessageRef;
 }