fix: re-render issue in the useFetchReactions hook (#3233)

Author: khushal87

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -138,16 +138,20 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     [propReactions, fetchedReactions],
   );
 
-  const renderItem = ({ item }: { item: Reaction }) => (
-    <MessageUserReactionsItem
-      MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-      reaction={item}
-      supportedReactions={supportedReactions ?? []}
-    />
+  const renderItem = useCallback(
+    ({ item }: { item: Reaction }) => (
+      <MessageUserReactionsItem
+        MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+        reaction={item}
+        supportedReactions={supportedReactions ?? []}
+      />
+    ),
+    [MessageUserReactionsAvatar, MessageUserReactionsItem, supportedReactions],
   );
 
-  const renderHeader = () => (
-    <Text style={[styles.reactionsText, reactionsText]}>{t('Message Reactions')}</Text>
+  const renderHeader = useCallback(
+    () => <Text style={[styles.reactionsText, reactionsText]}>{t('Message Reactions')}</Text>,
+    [t, reactionsText],
   );
 
   const selectorReactions: ReactionSelectorItemType[] = messageReactions.map((reaction) => ({

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -22,44 +22,47 @@ export const useFetchReactions = ({
   const [next, setNext] = useState<string | undefined>(undefined);
   const messageId = message?.id;
 
-  const { client, enableOfflineSupport } = useChatContext();
+  const { client } = useChatContext();
 
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
-  const fetchReactions = useCallback(async () => {
-    if (!messageId) {
-      return;
-    }
-    try {
-      const response = await client.queryReactions(
-        messageId,
-        reactionType ? { type: reactionType } : {},
-        sort,
-        { limit, next },
-      );
-      if (response) {
-        setReactions((prevReactions) =>
-          next ? [...prevReactions, ...response.reactions] : response.reactions,
+  const fetchReactions = useCallback(
+    async (next: string | undefined) => {
+      if (!messageId) {
+        return;
+      }
+      try {
+        const response = await client.queryReactions(
+          messageId,
+          reactionType ? { type: reactionType } : {},
+          sort,
+          { limit, next },
         );
-        setNext(response.next);
-        setLoading(false);
+        if (response) {
+          setNext(response.next);
+
+          setReactions((prevReactions) =>
+            next ? [...prevReactions, ...response.reactions] : response.reactions,
+          );
+          setLoading(false);
+        }
+      } catch (error) {
+        console.log('Error fetching reactions: ', error);
       }
-    } catch (error) {
-      console.log('Error fetching reactions: ', error);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client, messageId, reactionType, sortString, next, limit, enableOfflineSupport]);
+    },
+    [messageId, client, reactionType, sort, limit],
+  );
 
   const loadNextPage = useCallback(async () => {
     if (next) {
-      await fetchReactions();
+      await fetchReactions(next);
     }
   }, [fetchReactions, next]);
 
   useEffect(() => {
     setReactions([]);
     setNext(undefined);
-    fetchReactions();
+    fetchReactions(undefined);
   }, [fetchReactions, messageId, reactionType, sortString]);
 
   useEffect(() => {