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

Author: MartinCupela

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) {

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]);
 };

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]);
 };

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]);
 };

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]);
 };

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]);
 };

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]);
 };

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,
+  ]);
 };

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]);
 };

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]);
 };

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]);
 };

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]);
 };