fix: improve the entire channel list re-render for useUserPresence hook

Author: khushal87

package/src/components/ChannelList/ChannelList.tsx

@@ -10,7 +10,6 @@ import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetwor
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
-import { useUserPresence } from './hooks/listeners/useUserPresence';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import { Skeleton as SkeletonDefault } from './Skeleton';
@@ -367,11 +366,6 @@ export const ChannelList = <
     setChannels: channelManager.setChannels,
   });
 
-  useUserPresence({
-    setChannels: channelManager.setChannels,
-    setForceUpdate,
-  });
-
   const channelIdsStr = channels?.reduce((acc, channel) => `${acc}${channel.cid}`, '');
 
   useEffect(() => {

package/src/components/ChannelList/hooks/listeners/useUserPresence.ts

@@ -12,6 +12,10 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
     setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
   };
 
+/**
+ * Hook to update the channel members when the user presence changes
+ * @deprecated this hook will be removed in favour of the useChannelPreviewDisplayPresence to improve performance
+ */
 export const useUserPresence = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({

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

@@ -1,6 +1,6 @@
 import { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';
 
-import { useSelectedChannelState } from './useSelectedChannelState';
+import { useSelectedChannelState } from '../../../hooks/useSelectedChannelState';
 
 import { DefaultStreamChatGenerics } from '../../../types/types';
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts

@@ -1,27 +1,41 @@
-import type { Channel } from 'stream-chat';
+import type { Channel, EventTypes, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
+import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 /**
- * Hook to set the display avatar presence for channel preview
- * @param {*} channel
+ * Selector to get the display avatar presence for channel preview
+ * @param channel
+ * @param client
+ * @returns boolean
  *
- * @returns {boolean} e.g., true
+ * NOTE: If you want to listen to the value changes where you call the hook, the selector should return primitive values instead of object.
  */
-export const useChannelPreviewDisplayPresence = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics>(
   channel: Channel<StreamChatGenerics>,
+  client: StreamChat<StreamChatGenerics>,
 ) => {
-  const { client } = useChatContext<StreamChatGenerics>();
   const members = channel.state.members;
   const membersCount = Object.keys(members).length;
-
-  if (membersCount !== 2) return false;
-
   const otherMember = Object.values(members).find((member) => member.user?.id !== client.userID);
 
+  if (membersCount !== 2) return false;
   return otherMember?.user?.online ?? false;
 };
+
+const keys: EventTypes[] = ['user.presence.changed', 'user.updated'];
+
+/**
+ * Hook to set the display avatar presence for channel preview
+ * @param {*} channel
+ *
+ * @returns {boolean} e.g., true
+ */
+export function useChannelPreviewDisplayPresence<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+>(channel: Channel<StreamChatGenerics>) {
+  const { client } = useChatContext<StreamChatGenerics>();
+  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+}

…nelList/hooks/useSelectedChannelState.ts …age/src/hooks/useSelectedChannelState.tspackage/src/components/ChannelList/hooks/useSelectedChannelState.ts renamed to package/src/hooks/useSelectedChannelState.ts package/src/components/ChannelList/hooks/useSelectedChannelState.ts renamed to package/src/hooks/useSelectedChannelState.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import type { Channel, EventTypes } from 'stream-chat';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-import { DefaultStreamChatGenerics } from '../../../types/types';
+import { DefaultStreamChatGenerics } from '../types/types';
 
 const noop = () => {};
 

package/src/hooks/useSyncClientEvents.ts

@@ -0,0 +1,69 @@
+import { useCallback } from 'react';
+
+import type { Channel, EventTypes, StreamChat } from 'stream-chat';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import { DefaultStreamChatGenerics } from '../types/types';
+
+const noop = () => {};
+
+export function useSyncClientEventsToChannel<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>(_: {
+  channel: Channel<StreamChatGenerics>;
+  client: StreamChat<StreamChatGenerics>;
+  selector: (channel: Channel<StreamChatGenerics>, client: StreamChat<StreamChatGenerics>) => O;
+  stateChangeEventKeys?: EventTypes[];
+}): O;
+export function useSyncClientEventsToChannel<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>(_: {
+  selector: (channel: Channel<StreamChatGenerics>, client: StreamChat<StreamChatGenerics>) => O;
+  channel?: Channel<StreamChatGenerics> | undefined;
+  client?: StreamChat<StreamChatGenerics> | undefined;
+  stateChangeEventKeys?: EventTypes[];
+}): O | undefined;
+export function useSyncClientEventsToChannel<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>({
+  channel,
+  client,
+  selector,
+  stateChangeEventKeys = ['all'],
+}: {
+  selector: (channel: Channel<StreamChatGenerics>, client: StreamChat<StreamChatGenerics>) => O;
+  channel?: Channel<StreamChatGenerics> | undefined;
+  client?: StreamChat<StreamChatGenerics>;
+  stateChangeEventKeys?: EventTypes[];
+}): O | undefined {
+  const subscribe = useCallback(
+    (onStoreChange: (value: O) => void) => {
+      if (!client || !channel) {
+        return noop;
+      }
+
+      const subscriptions = stateChangeEventKeys.map((et) =>
+        client.on(et, () => {
+          onStoreChange(selector(channel, client));
+        }),
+      );
+
+      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    },
+    [channel, client, selector, stateChangeEventKeys],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (!client || !channel) {
+      return undefined;
+    }
+
+    const originalSnapshot = selector(channel, client);
+    return originalSnapshot;
+  }, [channel, client, selector]);
+
+  return useSyncExternalStore(subscribe, getSnapshot);
+}