fix: add missing dependencies to ChannelList hooks effects (#2525)

GetStream · Oct 7, 2024 · 9cb8e47 · 9cb8e47
1 parent 8980016
commit 9cb8e47
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 24 deletions.
diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx
@@ -252,7 +252,9 @@ const UnMemoizedChannelList = <
    * For some events, inner properties on the channel will update but the shallow comparison will not
    * force a re-render. Incrementing this dummy variable ensures the channel previews update.
    */
-  const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+  const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), [
+    setChannelUpdateCount,
+  ]);
 
   const onSearch = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     if (!event.target.value) {

diff --git a/src/components/ChannelList/hooks/useChannelDeletedListener.ts b/src/components/ChannelList/hooks/useChannelDeletedListener.ts
@@ -27,7 +27,7 @@ export const useChannelDeletedListener = <
 
           if (channelIndex < 0) return [...channels];
 
-          // Remove the deleted channel from the list.s
+          // Remove the deleted channel from the list
           channels.splice(channelIndex, 1);
 
           return [...channels];
@@ -40,6 +40,5 @@ export const useChannelDeletedListener = <
     return () => {
       client.off('channel.deleted', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useChannelHiddenListener.ts b/src/components/ChannelList/hooks/useChannelHiddenListener.ts
@@ -39,6 +39,5 @@ export const useChannelHiddenListener = <
     return () => {
       client.off('channel.hidden', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useChannelTruncatedListener.ts b/src/components/ChannelList/hooks/useChannelTruncatedListener.ts
@@ -35,6 +35,5 @@ export const useChannelTruncatedListener = <
     return () => {
       client.off('channel.truncated', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useChannelUpdatedListener.ts b/src/components/ChannelList/hooks/useChannelUpdatedListener.ts
@@ -50,6 +50,5 @@ export const useChannelUpdatedListener = <
     return () => {
       client.off('channel.updated', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [client, customHandler, forceUpdate, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useChannelVisibleListener.ts b/src/components/ChannelList/hooks/useChannelVisibleListener.ts
@@ -39,6 +39,5 @@ export const useChannelVisibleListener = <
     return () => {
       client.off('channel.visible', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useConnectionRecoveredListener.ts b/src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
@@ -23,6 +23,5 @@ export const useConnectionRecoveredListener = <
     return () => {
       client.off('connection.recovered', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [client, forceUpdate]);
 };
diff --git a/src/components/ChannelList/hooks/useMessageNewListener.ts b/src/components/ChannelList/hooks/useMessageNewListener.ts
@@ -47,6 +47,11 @@ export const useMessageNewListener = <
     return () => {
       client.off('message.new', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lockChannelOrder]);
+  }, [
+    allowNewMessagesFromUnfilteredChannels,
+    client,
+    customHandler,
+    lockChannelOrder,
+    setChannels,
+  ]);
 };
diff --git a/src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts b/src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts
@@ -47,6 +47,5 @@ export const useNotificationAddedToChannelListener = <
     return () => {
       client.off('notification.added_to_channel', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts b/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts
@@ -40,6 +40,5 @@ export const useNotificationMessageNewListener = <
     return () => {
       client.off('notification.message_new', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts b/src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
@@ -33,6 +33,5 @@ export const useNotificationRemovedFromChannelListener = <
     return () => {
       client.off('notification.removed_from_channel', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customHandler]);
+  }, [client, customHandler, setChannels]);
 };
diff --git a/src/components/ChannelList/hooks/useUserPresenceChangedListener.ts b/src/components/ChannelList/hooks/useUserPresenceChangedListener.ts
@@ -36,6 +36,5 @@ export const useUserPresenceChangedListener = <
     return () => {
       client.off('user.presence.changed', handleEvent);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [client, setChannels]);
 };