fix: improve the entire channel list re-render for useUserPresence hook (#3011)

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

* tests: add a few tests

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/__tests__/ChannelList.test.js

@@ -25,8 +25,6 @@ import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchNotificationAddedToChannelEvent from '../../../mock-builders/event/notificationAddedToChannel';
 import dispatchNotificationMessageNewEvent from '../../../mock-builders/event/notificationMessageNew';
 import dispatchNotificationRemovedFromChannel from '../../../mock-builders/event/notificationRemovedFromChannel';
-import dispatchUserPresenceEvent from '../../../mock-builders/event/userPresence';
-import dispatchUserUpdatedEvent from '../../../mock-builders/event/userUpdated';
 import { generateChannel, generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
@@ -691,65 +689,5 @@ describe('ChannelList', () => {
         });
       });
     });
-
-    describe('user.updated', () => {
-      it('should call handleEvent in the custom hook if the user updates', async () => {
-        useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
-        const updateSpy = jest.spyOn(chatClient, 'on');
-        const offlineUser = generateUser();
-
-        render(
-          <Chat client={chatClient}>
-            <ChannelList {...props} />
-          </Chat>,
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('channel-list')).toBeTruthy();
-        });
-
-        act(() =>
-          dispatchUserUpdatedEvent(
-            chatClient,
-            { ...offlineUser, name: 'dan' },
-            testChannel1.channel,
-          ),
-        );
-
-        await waitFor(() => {
-          expect(updateSpy).toHaveBeenCalledWith('user.updated', expect.any(Function));
-        });
-      });
-    });
-
-    describe('user.presence.changed', () => {
-      it('should call handleEvent in the custom hook if user presence changes', async () => {
-        useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
-        const updateSpy = jest.spyOn(chatClient, 'on');
-        const offlineUser = generateUser();
-
-        render(
-          <Chat client={chatClient}>
-            <ChannelList {...props} />
-          </Chat>,
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('channel-list')).toBeTruthy();
-        });
-
-        act(() =>
-          dispatchUserPresenceEvent(
-            chatClient,
-            { ...offlineUser, online: true },
-            testChannel1.channel,
-          ),
-        );
-
-        await waitFor(() => {
-          expect(updateSpy).toHaveBeenCalledWith('user.presence.changed', expect.any(Function));
-        });
-      });
-    });
   });
 });

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/__tests__/useChannelPreviewDisplayPresence.test.tsx

@@ -0,0 +1,108 @@
+import { renderHook } from '@testing-library/react-native';
+import type { Channel, StreamChat, UserResponse } from 'stream-chat';
+
+import type { ChatContextValue } from '../../../../contexts/chatContext/ChatContext';
+import * as ChatContext from '../../../../contexts/chatContext/ChatContext';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { DefaultStreamChatGenerics } from '../../../../types/types';
+import { useChannelPreviewDisplayPresence } from '../useChannelPreviewDisplayPresence';
+
+describe('useChannelPreviewDisplayPresence', () => {
+  // Mock user data
+  const currentUserId = 'current-user';
+  const otherUserId = 'other-user';
+  let chatClient: StreamChat<DefaultStreamChatGenerics>;
+
+  let mockChannel: Channel<DefaultStreamChatGenerics>;
+
+  beforeEach(async () => {
+    jest.clearAllMocks();
+    chatClient = await getTestClientWithUser({
+      id: currentUserId,
+      userID: currentUserId,
+    });
+
+    // Create mock channel
+    mockChannel = {
+      state: {
+        members: {
+          [currentUserId]: {
+            user: { id: currentUserId, online: true } as UserResponse<DefaultStreamChatGenerics>,
+          },
+          [otherUserId]: {
+            user: { id: otherUserId, online: false } as UserResponse<DefaultStreamChatGenerics>,
+          },
+        },
+      },
+    } as unknown as Channel<DefaultStreamChatGenerics>;
+
+    // Mock the useChatContext hook
+    jest
+      .spyOn(ChatContext, 'useChatContext')
+      .mockImplementation(() => ({ client: chatClient }) as unknown as ChatContextValue);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return false for channels with more than 2 members', () => {
+    // Create a channel with 3 members
+    const thirdUserId = 'third-user';
+    const channelWithThreeMembers = {
+      state: {
+        members: {
+          [currentUserId]: {
+            user: { id: currentUserId } as UserResponse<DefaultStreamChatGenerics>,
+          },
+          [otherUserId]: {
+            user: { id: otherUserId } as UserResponse<DefaultStreamChatGenerics>,
+          },
+          [thirdUserId]: {
+            user: { id: thirdUserId } as UserResponse<DefaultStreamChatGenerics>,
+          },
+        },
+      },
+    } as unknown as Channel<DefaultStreamChatGenerics>;
+
+    const { result } = renderHook(() => useChannelPreviewDisplayPresence(channelWithThreeMembers));
+    expect(result.current).toBe(false);
+  });
+
+  it('should return false when the other user is offline', () => {
+    const { result } = renderHook(() => useChannelPreviewDisplayPresence(mockChannel));
+    expect(result.current).toBe(false);
+  });
+
+  it('should return true when the other user is online', () => {
+    // Update the other user to be online
+    const onlineUser = {
+      ...mockChannel.state.members[otherUserId].user,
+      online: true,
+    } as UserResponse<DefaultStreamChatGenerics>;
+
+    mockChannel.state.members[otherUserId].user = onlineUser;
+
+    const { result } = renderHook(() => useChannelPreviewDisplayPresence(mockChannel));
+    expect(result.current).toBe(true);
+  });
+
+  it('should handle null user gracefully', () => {
+    // Create a channel with a member that has no user
+    const channelWithNullUser = {
+      state: {
+        members: {
+          [currentUserId]: {
+            user: { id: currentUserId } as UserResponse<DefaultStreamChatGenerics>,
+          },
+          'null-user': {
+            user: null,
+          },
+        },
+      },
+    } as unknown as Channel<DefaultStreamChatGenerics>;
+
+    const { result } = renderHook(() => useChannelPreviewDisplayPresence(channelWithNullUser));
+    expect(result.current).toBe(false);
+  });
+});

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

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