feat: enable exhaustive-deps, but ignore all current errors (#2244)

### 🎯 Goal

Generally, `react-hooks/exhaustive-deps` eslint rule is very useful, but
for historical reasons it's not always followed in our SDK. We can't fix
every place this rule is violated, but at least we want to have
exhaustive deps moving forward.

This PR enable this eslint rule, but adds in-place ignores everywhere
it's currently violated. That way we can make fixes incrementally, and
benefit from improved linting moving forward.

### 🛠 Implementation details

All changes were made automatically (and manually reviewed afterwards):

1. Enable `react-hooks/exhaustive-deps`
2. Export all linting errors to `lint.json`:

```sh
npx eslint 'src/**/*.{js,ts,tsx,md}' -f json -o lint.json 
```

3. Use this script to add in-place ignores (adapted from
https://stackoverflow.com/questions/60629026/is-there-a-way-to-programmatically-suppress-all-eslint-errors-on-a-line-by-line):

```js
const json = require('./lint.json');
const fs = require('fs');

json.forEach(({ filePath, messages, source }) => {
  if (!source) {
    return;
  }

  const data = source.split('\n');
  let offset = 1;

  const groupedMessages = messages.reduce((acc, next) => {
    const prevMessages = acc[next.line] ? acc[next.line] : [];
    const duplicateRuleForLine = prevMessages.find((message) => message.ruleId === next.ruleId);
    const applicableRule = next.ruleId === 'react-hooks/exhaustive-deps';

    if (duplicateRuleForLine || !applicableRule) {
      return acc;
    }

    return {
      ...acc,
      [next.line]: [...prevMessages, next],
    };
  }, {});

  Object.entries(groupedMessages).forEach(([line, messages]) => {
    const ignore = `// eslint-disable-next-line ${messages.map(({ ruleId }) => ruleId).join(' ')}`;
    data.splice(line - offset, 0, ignore);
    offset--;
  });

  const updated = data.join('\n');

  fs.writeFile(filePath, updated, function (err) {
    if (err) return console.log(err);
  });
});
```

Author: myandrienko

.eslintrc.json

@@ -79,7 +79,7 @@
     "max-classes-per-file": 0,
     "camelcase": 0,
     "react-hooks/rules-of-hooks": 1,
-    "react-hooks/exhaustive-deps": 0,
+    "react-hooks/exhaustive-deps": 1,
     "jest/prefer-inline-snapshots": 0,
     "jest/lowercase-name": 0,
     "jest/prefer-expect-assertions": 0,
@@ -166,7 +166,7 @@
         "@typescript-eslint/ban-ts-comment": 0,
         "@typescript-eslint/no-unused-vars": 1,
         "@typescript-eslint/no-var-requires": 0,
-        "react-hooks/exhaustive-deps": 0,
+        "react-hooks/exhaustive-deps": 1,
         "react-native/no-inline-styles": 0,
         "array-callback-return": 2,
         "arrow-body-style": 2,

src/components/Attachment/Attachment.tsx

@@ -84,6 +84,7 @@ export const Attachment = <
 ) => {
   const { attachments } = props;
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const groupedAttachments = useMemo(() => renderGroupedAttachments(props), [attachments]);
 
   return (

src/components/Attachment/AttachmentContainer.tsx

@@ -260,6 +260,7 @@ export const MediaContainer = <
       );
       setAttachmentConfiguration(config);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videoElement, videoAttachmentSizeHandler, attachment]);
 
   const content = (

src/components/Attachment/hooks/useAudioController.ts

@@ -43,6 +43,7 @@ export const useAudioController = () => {
     audioRef.current.play();
 
     return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       audioRef.current?.pause();
 
       window.clearInterval(interval);

src/components/Channel/Channel.tsx

@@ -567,6 +567,7 @@ const ChannelInner = <
       client.off('user.deleted', handleEvent);
       notificationTimeouts.forEach(clearTimeout);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     channel.cid,
     channelQueryOptions,
@@ -987,6 +988,7 @@ const ChannelInner = <
       skipMessageDataMemoization,
       updateMessage,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       channel.cid,
       deleteMessage,
@@ -1046,6 +1048,7 @@ const ChannelInner = <
       TypingIndicator: props.TypingIndicator,
       VirtualMessage: props.VirtualMessage,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.reactionOptions],
   );
 

src/components/Channel/__tests__/Channel.test.js

@@ -61,6 +61,7 @@ const CallbackEffectWithChannelContexts = ({ callback }) => {
   const channelActionContext = useChannelActionContext();
   const componentContext = useComponentContext();
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const channelContext = {
     ...channelStateContext,
     ...channelActionContext,

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -136,6 +136,7 @@ export const useCreateChannelStateContext = <
       watcherCount,
       watchers,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       channelId,
       debounceURLEnrichmentMs,

src/components/Channel/hooks/useCreateTypingContext.ts

@@ -16,6 +16,7 @@ export const useCreateTypingContext = <
     () => ({
       typing,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [typingValue],
   );
 

src/components/ChannelList/ChannelList.tsx

@@ -258,11 +258,13 @@ const UnMemoizedChannelList = <
       setSearchActive(true);
     }
     additionalChannelSearchProps?.onSearch?.(event);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onSearchExit = useCallback(() => {
     setSearchActive(false);
     additionalChannelSearchProps?.onSearchExit?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(
@@ -317,6 +319,7 @@ const UnMemoizedChannelList = <
       client.off('channel.deleted', handleEvent);
       client.off('channel.hidden', handleEvent);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channel?.cid]);
 
   const renderChannel = (item: Channel<StreamChatGenerics>) => {

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -1700,6 +1700,7 @@ describe('ChannelList', () => {
         const { channels, setChannels } = useChannelListContext();
         useEffect(() => {
           setChannelsFromOutside = setChannels;
+          // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return <div>{channelsToIdString(channels)}</div>;
       };