stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

package/src/components/ChannelPreview/hooks/__tests__/useChannelTypingState.test.tsx

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { Event } from 'stream-chat';
+
+import { initiateClientWithChannels } from '../../../../mock-builders/api/initiateClientWithChannels';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { Chat } from '../../../Chat/Chat';
+import { useChannelTypingState } from '../useChannelTypingState';
+
+describe('useChannelTypingState', () => {
+  const setup = async () => {
+    const me = generateUser({ id: 'me' });
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels({ customUser: me });
+    const wrapper = ({ children }: PropsWithChildren) => <Chat client={client}>{children}</Chat>;
+    const { result } = renderHook(() => useChannelTypingState({ channel }), { wrapper });
+    return { channel, client, result };
+  };
+
+  const typingEvent = (
+    channel: { cid: string },
+    userId: string,
+    type: 'typing.start' | 'typing.stop',
+  ) => fromPartial<Event>({ cid: channel.cid, type, user: { id: userId } });
+
+  it('starts empty', async () => {
+    const { result } = await setup();
+    expect(result.current.usersTyping).toEqual([]);
+  });
+
+  it('reflects another user typing, reactively, and clears on typing.stop', async () => {
+    const { channel, client, result } = await setup();
+
+    act(() => {
+      client.dispatchEvent(typingEvent(channel, 'other', 'typing.start'));
+    });
+    expect(result.current.usersTyping.map((u) => u.id)).toEqual(['other']);
+
+    act(() => {
+      client.dispatchEvent(typingEvent(channel, 'other', 'typing.stop'));
+    });
+    expect(result.current.usersTyping).toEqual([]);
+  });
+
+  it('excludes the current user from typing', async () => {
+    const { channel, client, result } = await setup();
+
+    act(() => {
+      client.dispatchEvent(typingEvent(channel, 'me', 'typing.start'));
+    });
+    expect(result.current.usersTyping).toEqual([]);
+  });
+});

package/src/components/ChannelPreview/hooks/__tests__/useIsChannelPinned.test.tsx

@@ -1,18 +1,15 @@
-import { renderHook } from '@testing-library/react-native';
-import { Channel } from 'stream-chat';
+import { StateStore } from '@stream-io/state-store';
+import { act, renderHook } from '@testing-library/react-native';
+import { Channel, ChannelMemberResponse } from 'stream-chat';
 
+import { convertDateToTimestamp } from '../../../../mock-builders/generator/time';
 import { useIsChannelPinned } from '../useIsChannelPinned';
 
 describe('useIsChannelPinned', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   const buildMockChannel = (membership: Record<string, unknown> = {}) =>
     ({
       initialized: true,
-      on: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
-      state: { membership },
+      state: new StateStore({ membership }),
     }) as unknown as Channel;
 
   it('returns false when membership has no pinned_at', () => {
@@ -22,14 +19,26 @@ describe('useIsChannelPinned', () => {
   });
 
   it('returns true when membership has a pinned_at timestamp', () => {
-    const channel = buildMockChannel({ pinned_at: '2026-06-15T08:00:00.000Z' });
+    const channel = buildMockChannel({
+      pinned_at: convertDateToTimestamp('2026-06-15T08:00:00.000Z'),
+    });
     const { result } = renderHook(() => useIsChannelPinned(channel));
     expect(result.current).toBe(true);
   });
 
-  it('subscribes to member.updated events', () => {
+  it('updates reactively when channel.state.membership changes', () => {
     const channel = buildMockChannel({ pinned_at: null });
-    renderHook(() => useIsChannelPinned(channel));
-    expect(channel.on).toHaveBeenCalledWith('member.updated', expect.any(Function));
+    const { result } = renderHook(() => useIsChannelPinned(channel));
+    expect(result.current).toBe(false);
+
+    act(() => {
+      channel.state.partialNext({
+        membership: {
+          pinned_at: convertDateToTimestamp('2026-06-15T08:00:00.000Z'),
+        } as ChannelMemberResponse,
+      });
+    });
+
+    expect(result.current).toBe(true);
   });
 });

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

@@ -1,182 +1,63 @@
-import { type SetStateAction, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 
-import throttle from 'lodash/throttle';
-import type { Channel, Event, LocalMessage, MessageResponse, StreamChat } from 'stream-chat';
+import type {
+  Channel,
+  LocalMessage,
+  MembershipState,
+  MessagePaginatorAggregateState,
+  MessageResponse,
+  MuteStatusState,
+  ReadState,
+  StreamChat,
+} from 'stream-chat';
 
-import { useIsChannelMuted } from './useIsChannelMuted';
-import { useIsChannelPinned } from './useIsChannelPinned';
-
-import { useChannelsContext } from '../../../contexts';
-import { useStableCallback } from '../../../hooks';
-
-const setLastMessageThrottleTimeout = 500;
-const setLastMessageThrottleOptions = { leading: true, trailing: true };
-
-const refreshUnreadCountThrottleTimeout = 400;
-const refreshUnreadCountThrottleOptions = setLastMessageThrottleOptions;
+import { useStateStore } from '../../../hooks';
 
 export type LastMessageType = LocalMessage | MessageResponse;
 
-export const useChannelPreviewData = (
-  channel: Channel,
-  client: StreamChat,
-  forceUpdateOverride?: number,
-) => {
-  const [forceUpdate, setForceUpdate] = useState(0);
-  const [lastMessage, setLastMessageInner] = useState<LastMessageType>(
-    () => channel.state.latestMessages[channel.state.latestMessages.length - 1],
-  );
-  const throttledSetLastMessage = useMemo(
-    () =>
-      throttle(
-        (newLastMessage: SetStateAction<LastMessageType>) => setLastMessageInner(newLastMessage),
-        setLastMessageThrottleTimeout,
-        setLastMessageThrottleOptions,
-      ),
-    [],
-  );
-  const setLastMessage = useStableCallback((newLastMessage: SetStateAction<LastMessageType>) =>
-    throttledSetLastMessage(newLastMessage),
-  );
-  const [unread, setUnread] = useState(channel.countUnread());
-  const { muted } = useIsChannelMuted(channel);
-  const pinned = useIsChannelPinned(channel);
-  const { forceUpdate: contextForceUpdate } = useChannelsContext();
-  const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
-
-  const channelLastMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
-  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
-
-  const refreshUnreadCount = useMemo(
-    () =>
-      throttle(
-        () => {
-          if (muted) {
-            setUnread(0);
-          } else {
-            setUnread(channel.countUnread());
-          }
-        },
-        refreshUnreadCountThrottleTimeout,
-        refreshUnreadCountThrottleOptions,
-      ),
-    [channel, muted],
+// The last message is sourced reactively from the paginator's `aggregateState` — a store kept
+// separate from pagination `state` precisely so it stays reactive when a new message lands in the
+// head interval while an older window is active (a `state`-derived latest would go stale off-window).
+// The preview re-renders whenever the newest message changes (new/edited/deleted) with no manual
+// event plumbing.
+const lastMessageSelector = (state: MessagePaginatorAggregateState) => ({
+  lastMessage: state.lastMessage ?? undefined,
+});
+
+export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
+  const userId = client.userID;
+  const { lastMessage } =
+    useStateStore(channel.messagePaginator.aggregateState, lastMessageSelector) ?? {};
+
+  // One `channel.state` subscription for the whole preview row — mute status, membership (for pin)
+  // and own unread — instead of one subscription per concern. Fewer subscribers means the
+  // `channel.state` notify fan-out runs fewer selectors per publish, and fewer `useSyncExternalStore`
+  // instances per mounted row. The public `useIsChannelMuted` / `useIsChannelPinned` hooks are
+  // unchanged for every other caller; this aggregator just reads the combined slice directly.
+  const previewStateSelector = useCallback(
+    (state: MembershipState & MuteStatusState & ReadState) => ({
+      membership: state.membership,
+      muteStatus: state.muteStatus,
+      unread: userId ? (state.read[userId]?.unread_messages ?? 0) : 0,
+    }),
+    [userId],
   );
-
+  const {
+    membership,
+    muteStatus,
+    unread: reactiveUnread,
+  } = useStateStore(channel.state, previewStateSelector) ?? {};
+
+  const muted = muteStatus?.muted ?? false;
+  const pinned = membership?.pinned_at != null;
+  // muted channels always render a zeroed unread count
+  const unread = muted ? 0 : (reactiveUnread ?? 0);
+
+  // drafts
   useEffect(() => {
     const unsubscribe = channel.messageComposer.registerDraftEventSubscriptions();
     return () => unsubscribe();
   }, [channel.messageComposer]);
 
-  useEffect(() => {
-    const { unsubscribe } = client.on('notification.mark_read', () => {
-      refreshUnreadCount();
-    });
-    return unsubscribe;
-  }, [client, refreshUnreadCount]);
-
-  useEffect(() => {
-    setLastMessage((prevLastMessage) =>
-      channelLastMessage &&
-      (channelLastMessage.id !== prevLastMessage?.id ||
-        channelLastMessage.updated_at !== prevLastMessage?.updated_at)
-        ? channelLastMessage
-        : prevLastMessage,
-    );
-    refreshUnreadCount();
-  }, [
-    channelLastMessage,
-    channelLastMessageString,
-    channelListForceUpdate,
-    setLastMessage,
-    refreshUnreadCount,
-  ]);
-
-  /**
-   * This effect listens for the `notification.mark_read` event and sets the unread count to 0
-   */
-  useEffect(() => {
-    const handleReadEvent = (event: Event) => {
-      if (!event.cid) {
-        return;
-      }
-      if (channel.cid !== event.cid) {
-        return;
-      }
-      if (event?.user?.id === client.userID) {
-        setUnread(0);
-      } else if (event?.user?.id) {
-        setForceUpdate((prev) => prev + 1);
-      }
-    };
-    const readSubscription = client.on('message.read', handleReadEvent);
-    // `message.read_locally` is the client-only equivalent emitted by `channel.markReadLocally()` when
-    // read events are disabled (e.g. livestreams with `isLocalUnreadCountEnabled`).
-    const localReadSubscription = client.on('message.read_locally', handleReadEvent);
-    return () => {
-      readSubscription.unsubscribe();
-      localReadSubscription.unsubscribe();
-    };
-  }, [client, channel]);
-
-  /**
-   * This effect listens for the `notification.mark_unread` event and updates the unread count
-   */
-  useEffect(() => {
-    const handleUnreadEvent = (event: Event) => {
-      if (!event.cid) {
-        return;
-      }
-      if (channel.cid !== event.cid) {
-        return;
-      }
-      if (event.user?.id !== client.user?.id) {
-        return;
-      }
-      setUnread(channel.countUnread());
-    };
-    const { unsubscribe } = client.on('notification.mark_unread', handleUnreadEvent);
-    return unsubscribe;
-  }, [client, channel]);
-
-  /**
-   * This effect listens for the `message.new`, `message.updated`, `message.deleted`, `message.undeleted`, and `channel.truncated` events
-   */
-  useEffect(() => {
-    refreshUnreadCount();
-
-    const handleEvent = () => {
-      setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
-      refreshUnreadCount();
-    };
-
-    const handleNewMessageEvent = (event: Event) => {
-      const message = event.message;
-      if (message && (!message.parent_id || message.show_in_channel)) {
-        setLastMessage(message);
-        refreshUnreadCount();
-      }
-    };
-
-    const handleUpdatedOrDeletedMessage = (event: Event) => {
-      setLastMessage((prevLastMessage) => {
-        if (prevLastMessage?.id === event.message?.id) {
-          return event.message;
-        }
-        return prevLastMessage;
-      });
-    };
-
-    const listeners = [
-      channel.on('message.new', handleNewMessageEvent),
-      channel.on('message.updated', handleUpdatedOrDeletedMessage),
-      channel.on('message.deleted', handleUpdatedOrDeletedMessage),
-      channel.on('message.undeleted', handleEvent),
-      channel.on('channel.truncated', handleEvent),
-    ];
-
-    return () => listeners.forEach((l) => l.unsubscribe());
-  }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
-
   return { lastMessage, muted, pinned, unread };
 };

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

@@ -10,11 +10,16 @@ import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMember
 const getMemberName = (member: ChannelMemberResponse) =>
   member.user?.name || member.user?.id || 'Unknown User';
 
+const pickName = (member: ChannelMemberResponse) => ({
+  id: member.user?.id,
+  name: member.user?.name,
+});
+
 export const useChannelPreviewDisplayName = (channel?: Channel) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const currentUserId = client?.userID;
-  const members = useChannelMembersState(channel);
+  const members = useChannelMembersState(channel, pickName);
   const channelName = useChannelName(channel);
 
   const displayName = useMemo(() => {
@@ -36,7 +41,7 @@ export const useChannelPreviewDisplayName = (channel?: Channel) => {
       // Now show the first 2 members and the rest as +N. Don't show the +N if the remaining members are 0.
       const firstTwoMembers = sortedMembers.slice(0, 2);
       const remainingMembers = sortedMembers.slice(2);
-      return `${firstTwoMembers.join(', ').concat(' ')}${remainingMembers.length > 0 ? t('and {{ count }} others', { count: remainingMembers.length }) : ''}`;
+      return `${firstTwoMembers.join(', ').concat(' ')}${remainingMembers.length > 0 ? t('channelPreview.displayName.others.label', 'and {{ count }} others', { count: remainingMembers.length }) : ''}`;
     }
   }, [channelName, currentUserId, members, t]);
 

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

@@ -1,4 +1,4 @@
-import type { Channel, EventTypes, StreamChat } from 'stream-chat';
+import type { Channel, EventType, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
@@ -21,7 +21,7 @@ const selector = (channel: Channel, client: StreamChat) => {
   return otherMember?.user?.online ?? false;
 };
 
-const keys: EventTypes[] = ['user.presence.changed', 'user.updated'];
+const keys: EventType[] = ['user.presence.changed', 'user.updated'];
 
 /**
  * Hook to set the display avatar presence for channel preview

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

@@ -32,19 +32,22 @@ export const useChannelPreviewDraftMessage = ({ channel }: UseChannelPreviewDraf
     stateSelector,
   );
 
-  const draftMessage: DraftMessage | undefined = useMemo(
-    () =>
-      !channel.messageComposer.compositionIsEmpty
-        ? attachments && draftText
-          ? {
-              attachments,
-              id: channel.messageComposer.id,
-              text: draftText,
-            }
-          : undefined
-        : undefined,
-    [channel.messageComposer, attachments, draftText],
-  );
+  const draftMessage = useMemo<DraftMessage | undefined>(() => {
+    if (channel.messageComposer.compositionIsEmpty) {
+      return undefined;
+    }
+
+    if (!draftText && !attachments?.length) {
+      return undefined;
+    }
+
+    return {
+      attachments,
+      custom: {},
+      id: channel.messageComposer.id,
+      text: draftText ?? '',
+    };
+  }, [channel.messageComposer, attachments, draftText]);
 
   return draftMessage;
 };

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

@@ -32,7 +32,7 @@ export const useChannelPreviewPollLabel = ({ pollId }: UseChannelPreviewPollLabe
       latestVotesByOption
         ? Object.values(latestVotesByOption)
             .map((votes) => votes?.[0])
-            .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+            .sort((a, b) => b.created_at - a.created_at)
         : [],
     [latestVotesByOption],
   );
@@ -43,9 +43,11 @@ export const useChannelPreviewPollLabel = ({ pollId }: UseChannelPreviewPollLabe
       const option = pollOptions?.find((option) => option.id === latestVotes[0].option_id);
       const voteUser = latestVotes[0].user;
       if (voteUser.id === client.user?.id) {
-        return t('You voted: {{ option }}', { option: option?.text });
+        return t('channelPreview.pollVote.byYou.label', 'You voted: {{ option }}', {
+          option: option?.text,
+        });
       } else {
-        return t('{{ user }} voted: {{ option }}', {
+        return t('channelPreview.pollVote.withUser.label', '{{ user }} voted: {{ option }}', {
           user: voteUser.name || voteUser.id,
           option: option?.text,
         });

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

@@ -1,48 +1,19 @@
-import { useCallback, useEffect, useState } from 'react';
+import { Channel } from 'stream-chat';
 
-import { Channel, Event, UserResponse } from 'stream-chat';
-
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useChannelTypingUsers } from '../../MessageList/hooks/useTypingUsers';
 
 type UseChannelTypingStateProps = {
   channel: Channel;
 };
 
-// Listen to the typing.start and typing.stop events and update the typing state
+/**
+ * Typing users for a channel-preview row. A thin wrapper over the shared `useChannelTypingUsers`
+ * core (the same reactive `channel.state.typing` source the in-channel indicator uses). The preview
+ * row isn't inside a `<Channel>` provider, so the channel is passed as a prop rather than read from
+ * context.
+ */
 export const useChannelTypingState = ({ channel }: UseChannelTypingStateProps) => {
-  const { client } = useChatContext();
-  const [usersTyping, setUsersTyping] = useState<UserResponse[]>([]);
-
-  const handleTypingStart = useCallback(
-    (event: Event) => {
-      if (channel.cid !== event.cid || event.user?.id === client?.user?.id) return;
-      setUsersTyping((prev) => {
-        if (!event.user) return prev;
-        if (prev.some((user) => user.id === event.user?.id)) return prev;
-        return [...prev, event.user];
-      });
-    },
-    [channel.cid, client?.user?.id],
-  );
-
-  const handleTypingStop = useCallback(
-    (event: Event) => {
-      if (channel.cid !== event.cid || event.user?.id === client?.user?.id) return;
-      setUsersTyping((prev) => prev.filter((user) => user.id !== event.user?.id));
-    },
-    [channel.cid, client?.user?.id],
-  );
-
-  useEffect(() => {
-    const listeners = [
-      channel.on('typing.start', handleTypingStart),
-      channel.on('typing.stop', handleTypingStop),
-    ];
-
-    return () => {
-      listeners.forEach((listener) => listener.unsubscribe());
-    };
-  }, [channel, handleTypingStart, handleTypingStop]);
+  const usersTyping = useChannelTypingUsers(channel);
 
   return { usersTyping };
 };

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

@@ -1,8 +1,6 @@
-import { useEffect, useState } from 'react';
+import type { Channel, ChannelMuteStatus } from 'stream-chat';
 
-import type { Channel } from 'stream-chat';
-
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks/useStateStore';
 
 const defaultMuteStatus = {
   createdAt: null,
@@ -10,37 +8,13 @@ const defaultMuteStatus = {
   muted: false,
 };
 
-export const useIsChannelMuted = (channel: Channel) => {
-  const { client } = useChatContext();
-
-  const [muted, setMuted] = useState(() => channel.muteStatus());
-
-  useEffect(() => {
-    const handleEvent = () => {
-      const newMuteStatus = channel.muteStatus();
-      if (
-        newMuteStatus.muted === muted.muted &&
-        newMuteStatus.createdAt?.getTime?.() === muted.createdAt?.getTime?.() &&
-        newMuteStatus.expiresAt?.getTime?.() === muted.expiresAt?.getTime?.()
-      ) {
-        return;
-      }
+const selector = (state: { muteStatus: ChannelMuteStatus }) => ({
+  muteStatus: state.muteStatus,
+});
 
-      setMuted(channel.muteStatus());
-    };
-
-    const listeners = [
-      client.on('notification.channel_mutes_updated', handleEvent),
-      client.on('health.check', (event) => {
-        if (event.me) {
-          handleEvent();
-        }
-      }),
-    ];
-    return () => {
-      listeners.forEach((listener) => listener.unsubscribe());
-    };
-  }, [channel, client, muted]);
-
-  return muted ?? defaultMuteStatus;
-};
+/**
+ * Returns this channel's mute status, sourced reactively from `channel.state.muteStatus` (kept in
+ * sync with `client.mutedChannels` on `notification.channel_mutes_updated` / `health.check`).
+ */
+export const useIsChannelMuted = (channel: Channel) =>
+  useStateStore(channel?.state, selector)?.muteStatus ?? defaultMuteStatus;

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

@@ -4,5 +4,5 @@ import { useChannelMembershipState } from '../../../hooks/useChannelMembershipSt
 
 export const useIsChannelPinned = (channel: Channel) => {
   const membership = useChannelMembershipState(channel);
-  return Boolean(membership?.pinned_at);
+  return membership?.pinned_at != null;
 };