Revert "Merge pull request #802 from GetStream/active-channels-perf-fix"

This reverts commit bfb9f66, reversing
changes made to eab95f0.

Author: tsirlucas

package/src/components/Channel/Channel.tsx

@@ -523,7 +523,6 @@ const ChannelWithContext = <
     supportedReactions = reactionData,
     t,
     thread: threadProps,
-    threadList,
     threadMessages,
     threadRepliesEnabled: threadRepliesEnabledProp,
     threadReply,
@@ -1563,7 +1562,6 @@ const ChannelWithContext = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
-    threadList,
     watcherCount,
     watchers,
   });

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -47,7 +47,6 @@ export const useCreateChannelContext = <
   setTargetedMessage,
   StickyHeader,
   targetedMessage,
-  threadList,
   typingEventsEnabled,
   watcherCount,
   watchers,
@@ -88,7 +87,6 @@ export const useCreateChannelContext = <
       setTargetedMessage,
       StickyHeader,
       targetedMessage,
-      threadList,
       typingEventsEnabled,
       watcherCount,
       watchers,
@@ -104,7 +102,6 @@ export const useCreateChannelContext = <
       readUsersLength,
       readUsersLastReads,
       targetedMessage,
-      threadList,
       typingEventsEnabled,
       watcherCount,
     ],

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
-import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
+import { useActiveChannels } from '../../../contexts/channelsStateContext/useActiveChannels';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
@@ -51,7 +51,7 @@ export const usePaginatedChannels = <
   sort = {},
 }: Parameters<Ch, Co, Us>) => {
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const activeChannels = useActiveChannelsRefContext();
+  const activeChannels = useActiveChannels();
 
   const [channels, setChannels] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>([]);
   const [error, setError] = useState(false);

package/src/components/MessageList/MessageList.tsx

@@ -950,7 +950,6 @@ export const MessageList = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
-    threadList,
     typingEventsEnabled,
   } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
@@ -974,13 +973,6 @@ export const MessageList = <
   const { loadMoreThread, thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { t, tDateTimeParser } = useTranslationContext();
 
-  // This needs to happen here because there is already a threadList prop added to the MessageList
-  if (thread?.id && !threadList) {
-    throw new Error(
-      'Please add a threadList prop to your Channel component when rendering a thread list. Check our Channel documentation for more info: https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#threadlist',
-    );
-  }
-
   return (
     <MessageListWithContext
       {...{

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -181,7 +181,6 @@ export type ChannelContextValue<
    * You will see a highlighted background for targetted message, when opened.
    */
   targetedMessage?: string;
-  threadList?: boolean;
   watcherCount?: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcher_count'];
 } & ChannelConfig;
 

package/src/contexts/channelContext/ChannelContext.tsx

@@ -1,14 +1,4 @@
-import React, {
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from 'react';
-
-import { ActiveChannelsProvider } from '../activeChannelsRefContext/ActiveChannelsRefContext';
+import React, { ReactNode, useCallback, useContext, useMemo, useReducer } from 'react';
 
 import type { ChannelContextValue } from '../channelContext/ChannelContext';
 import type { PaginatedMessageListContextValue } from '../paginatedMessageListContext/PaginatedMessageListContext';
@@ -229,15 +219,9 @@ export const ChannelsStateProvider = <
     [state],
   );
 
-  const activeChannelsRef = useRef(Object.keys(state));
-
-  useEffect(() => {
-    activeChannelsRef.current = Object.keys(state);
-  }, [state]);
-
   return (
     <ChannelsStateContext.Provider value={value as unknown as ChannelsStateContextValue}>
-      <ActiveChannelsProvider value={activeChannelsRef}>{children}</ActiveChannelsProvider>
+      {children}
     </ChannelsStateContext.Provider>
   );
 };

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+import { useChannelsStateContext } from './ChannelsStateContext';
+
+/* 
+  This needs to be a reference because the functions using it are not memoized (because they change too much even if you do
+  due to the dependencies they have) and they're called on connection state changes on the client which are subscribed on
+  mount with an useEffect so they're always getting only the first function reference which uses the old value of this
+  active channels array (would always be empty). Using a ref solves this problem cause then it will always be updated to
+  the latest one.
+*/
+export const useActiveChannels = () => {
+  const { state } = useChannelsStateContext();
+  const activeChannelsRef = useRef(Object.keys(state));
+
+  useEffect(() => {
+    activeChannelsRef.current = Object.keys(state);
+  }, [state]);
+
+  return activeChannelsRef;
+};

package/src/contexts/channelsStateContext/useActiveChannels.ts

@@ -33,11 +33,6 @@ type StateManagerParams<
   key: Key;
 };
 
-/* 
-  This hook takes care of creating a useState-like interface which can be used later to call
-  updates to the ChannelsStateContext reducer. It receives the cid and key which it wants to update
-  and perform the state updates. Also supports a initialState.
-*/
 function useStateManager<
   Key extends Keys,
   At extends UnknownType = DefaultAttachmentType,