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

package/src/hooks/actions/useUserActions.ts

@@ -31,16 +31,18 @@ export const useUserActions = (user: UserResponse | undefined): UserActions => {
     }
 
     try {
-      await client.muteUser(user.id);
+      await client.moderation.mute({ target_ids: [user.id] });
       addNotification({
-        message: t('{{ user }} has been muted', { user: user.name || user.id }),
+        message: t('message.userMuted.text', '{{ user }} has been muted', {
+          user: user.name || user.id,
+        }),
         options: { severity: 'success', type: 'api:user:mute:success' },
         origin: { context: { user }, emitter: 'UserActions' },
       });
       await options?.onSuccess?.();
     } catch (error) {
       addNotification({
-        message: t('Error muting a user ...'),
+        message: t('message.muteUser.error', 'Error muting a user ...'),
         options: {
           ...getNotificationErrorOptions(error),
           severity: 'error',
@@ -57,16 +59,18 @@ export const useUserActions = (user: UserResponse | undefined): UserActions => {
     }
 
     try {
-      await client.unmuteUser(user.id);
+      await client.moderation.unmute({ target_ids: [user.id] });
       addNotification({
-        message: t('{{ user }} has been unmuted', { user: user.name || user.id }),
+        message: t('message.userUnmuted.text', '{{ user }} has been unmuted', {
+          user: user.name || user.id,
+        }),
         options: { severity: 'success', type: 'api:user:unmute:success' },
         origin: { context: { user }, emitter: 'UserActions' },
       });
       await options?.onSuccess?.();
     } catch (error) {
       addNotification({
-        message: t('Error unmuting a user ...'),
+        message: t('message.unmuteUser.error', 'Error unmuting a user ...'),
         options: {
           ...getNotificationErrorOptions(error),
           severity: 'error',
@@ -85,14 +89,14 @@ export const useUserActions = (user: UserResponse | undefined): UserActions => {
     try {
       await client.blockUser(user.id);
       addNotification({
-        message: t('User blocked'),
+        message: t('channel.userBlocked.text', 'User blocked'),
         options: { severity: 'success', type: 'api:user:block:success' },
         origin: { context: { user }, emitter: 'UserActions' },
       });
       await options?.onSuccess?.();
     } catch (error) {
       addNotification({
-        message: t('Failed to block user'),
+        message: t('channel.blockUserFailed.error', 'Failed to block user'),
         options: {
           ...getNotificationErrorOptions(error),
           severity: 'error',
@@ -109,16 +113,16 @@ export const useUserActions = (user: UserResponse | undefined): UserActions => {
     }
 
     try {
-      await client.unBlockUser(user.id);
+      await client.unblockUser(user.id);
       addNotification({
-        message: t('User unblocked'),
+        message: t('channel.userUnblocked.text', 'User unblocked'),
         options: { severity: 'success', type: 'api:user:unblock:success' },
         origin: { context: { user }, emitter: 'UserActions' },
       });
       await options?.onSuccess?.();
     } catch (error) {
       addNotification({
-        message: t('Failed to block user'),
+        message: t('channel.blockUserFailed.error', 'Failed to block user'),
         options: {
           ...getNotificationErrorOptions(error),
           severity: 'error',

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useIsTargetedMessage';
 export * from '../a11y';
 export * from './actions';
 export * from './useAppStateListener';
@@ -11,12 +12,13 @@ export * from './useCanAddMembersToChannel';
 export * from './useChannelMuteActive';
 export * from './useIsDirectChat';
 export * from './useIsChannelMember';
-export * from './useSelectedChannelState';
 export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useScreenOrientation';
 export * from './useStateStore';
+export * from './useChannel';
+export * from './useMessagePaginator';
 export * from './usePendingAttachmentUpload';
 export * from './useStableCallback';
 export * from './useLoadingImage';

package/src/hooks/messagePreview/__tests__/useMessageDeliveryStatus.test.tsx

@@ -0,0 +1,119 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import { fromPartial } from '@total-typescript/shoehorn';
+
+import type { Channel, UserResponse } from 'stream-chat';
+
+import { Chat } from '../../../components/Chat/Chat';
+import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../useMessageDeliveryStatus';
+
+describe('useMessageDeliveryStatus', () => {
+  const ownMessage = generateMessage({ user: generateUser({ id: 'me' }) });
+
+  const setup = async ({
+    isReadEventsEnabled = true,
+    lastMessage = ownMessage,
+  }: { isReadEventsEnabled?: boolean; lastMessage?: ReturnType<typeof generateMessage> } = {}) => {
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels({ customUser: generateUser({ id: 'me' }) });
+    const wrapper = ({ children }: PropsWithChildren) => <Chat client={client}>{children}</Chat>;
+    const { result } = renderHook(
+      () => useMessageDeliveryStatus({ channel, isReadEventsEnabled, lastMessage }),
+      { wrapper },
+    );
+    return { channel, result };
+  };
+
+  const setReceipts = (
+    channel: Channel,
+    {
+      delivered = {},
+      readers = {},
+    }: { delivered?: Record<string, UserResponse[]>; readers?: Record<string, UserResponse[]> },
+  ) =>
+    channel.messageReceiptsTracker.snapshotStore.partialNext({
+      deliveredByMessageId: delivered,
+      readersByMessageId: readers,
+    });
+
+  it('returns NOT_SENT_BY_CURRENT_USER when read events are disabled', async () => {
+    const { result } = await setup({ isReadEventsEnabled: false });
+    expect(result.current.status).toBe(MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER);
+  });
+
+  it("returns undefined when the last message is not the current user's", async () => {
+    const { result } = await setup({
+      lastMessage: generateMessage({ user: generateUser({ id: 'other' }) }),
+    });
+    expect(result.current.status).toBeUndefined();
+  });
+
+  it('progresses SENT → DELIVERED → READ reactively as receipts arrive', async () => {
+    const { channel, result } = await setup();
+    expect(result.current.status).toBe(MessageDeliveryStatus.SENT);
+
+    act(() =>
+      setReceipts(channel, {
+        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
+      }),
+    );
+    expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
+
+    act(() =>
+      setReceipts(channel, {
+        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
+        readers: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
+      }),
+    );
+    expect(result.current.status).toBe(MessageDeliveryStatus.READ);
+  });
+
+  // The receipts tracker rebuilds its reader arrays on every snapshot, presence and user updates
+  // included, so a preview row must only re-render when the status itself changes.
+  it('does not re-render when the receipts change without changing the status', async () => {
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels({ customUser: generateUser({ id: 'me' }) });
+    const wrapper = ({ children }: PropsWithChildren) => <Chat client={client}>{children}</Chat>;
+    let renders = 0;
+    const { result } = renderHook(
+      () => {
+        renders++;
+        return useMessageDeliveryStatus({
+          channel,
+          isReadEventsEnabled: true,
+          lastMessage: ownMessage,
+        });
+      },
+      { wrapper },
+    );
+
+    act(() =>
+      setReceipts(channel, {
+        delivered: { [ownMessage.id]: [fromPartial<UserResponse>({ id: 'other' })] },
+      }),
+    );
+    expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
+    const rendersWhenDelivered = renders;
+
+    act(() =>
+      setReceipts(channel, {
+        delivered: {
+          [ownMessage.id]: [
+            fromPartial<UserResponse>({ id: 'other' }),
+            fromPartial<UserResponse>({ id: 'third' }),
+          ],
+        },
+      }),
+    );
+    expect(result.current.status).toBe(MessageDeliveryStatus.DELIVERED);
+    expect(renders).toBe(rendersWhenDelivered);
+  });
+});

package/src/hooks/messagePreview/__tests__/useMessagePreviewText.test.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 
-import { renderHook, waitFor } from '@testing-library/react-native';
+import { renderHook } from '@testing-library/react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -25,7 +25,7 @@ describe('useMessagePreviewText', () => {
   const withAttachments = (attachments?: Attachment[]) =>
     generateMessage({ attachments, text: '' });
 
-  // Drafts can have no text and no attachments; they rendered "{{count}} Files" / "0 Audios".
+  // Drafts can have no text and nothing attached; they used to render "0 Files" / "0 Audios".
   it.each([
     ['absent', undefined],
     ['empty', []],
@@ -38,16 +38,14 @@ describe('useMessagePreviewText', () => {
     const result = await render(
       withAttachments([generateImageAttachment(), generateFileAttachment()]),
     );
-    // Counted copy comes from the translations, which load asynchronously.
-    await waitFor(() => expect(result.current).toBe('2 Files'));
+    expect(result.current).toBe('2 Files');
   });
 
   it('counts audio-only attachments as audios', async () => {
     const result = await render(
       withAttachments([generateAudioAttachment(), generateAudioAttachment()]),
     );
-    // Counted copy comes from the translations, which load asynchronously.
-    await waitFor(() => expect(result.current).toBe('2 Audios'));
+    expect(result.current).toBe('2 Audios');
   });
 
   it('prefers the message text over its attachments', async () => {

package/src/hooks/messagePreview/useGroupedAttachments.ts

@@ -8,6 +8,7 @@ import {
   isVideoAttachment,
   isFileAttachment,
   isVoiceRecordingAttachment,
+  VoiceRecordingAttachment,
 } from 'stream-chat';
 
 type GroupedAttachments = {
@@ -16,7 +17,9 @@ type GroupedAttachments = {
   images: Attachment[];
   videos: Attachment[];
   files: Attachment[];
-  voiceRecordings: Attachment[];
+  // Narrowed by `isVoiceRecordingAttachment` below so consumers can read `.custom.duration`
+  // without re-asserting the subtype.
+  voiceRecordings: VoiceRecordingAttachment[];
 };
 
 /**

package/src/hooks/messagePreview/useMessageDeliveryStatus.ts

@@ -1,8 +1,15 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
-import { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
+import {
+  Channel,
+  LocalMessage,
+  MessageReceiptsSnapshot,
+  MessageResponse,
+  UserResponse,
+} from 'stream-chat';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../useStateStore';
 
 export enum MessageDeliveryStatus {
   NOT_SENT_BY_CURRENT_USER = 'not_sent_by_current_user',
@@ -13,91 +20,65 @@ export enum MessageDeliveryStatus {
 
 type MessageDeliveryStatusProps = {
   channel: Channel;
-  lastMessage: LocalMessage;
+  // Only `created_at`/`id`/`user` are read here (never the LocalMessage-only `status`), so a
+  // plain `MessageResponse` is accepted too — lets callers pass the channel's last message
+  // without asserting it is a `LocalMessage`.
+  lastMessage: LocalMessage | MessageResponse;
   isReadEventsEnabled: boolean;
 };
 
+const hasOtherUser = (users: UserResponse[] | undefined, currentUserId: string | undefined) =>
+  !!users && (users.length > 1 || (users.length === 1 && users[0].id !== currentUserId));
+
+/**
+ * Delivery/read status of the last own message, sourced reactively from the channel's
+ * `messageReceiptsTracker.snapshotStore` (`readersByMessageId` / `deliveredByMessageId`) — the same
+ * store the in-list read/delivered receipt hooks use. Replaces the previous manual
+ * `channel.on('message.new'/'message.delivered'/'message.read')` + `useState` machinery so there is
+ * a single reactive source of truth for receipts.
+ */
 export const useMessageDeliveryStatus = ({
   channel,
   lastMessage,
   isReadEventsEnabled = true,
 }: MessageDeliveryStatusProps) => {
   const { client } = useChatContext();
-  const [status, setStatus] = useState<MessageDeliveryStatus | undefined>(undefined);
-
-  const isOwnMessage = useCallback(
-    (message: LocalMessage | MessageResponse) =>
-      client.user && message && message.user?.id === client.user.id,
-    [client],
+  const messageId = lastMessage?.id ?? '';
+  const currentUserId = client.user?.id;
+
+  const selector = useCallback(
+    (snapshot: MessageReceiptsSnapshot) => ({
+      isDelivered: hasOtherUser(snapshot.deliveredByMessageId[messageId], currentUserId),
+      isRead: hasOtherUser(snapshot.readersByMessageId[messageId], currentUserId),
+    }),
+    [currentUserId, messageId],
   );
 
-  useEffect(() => {
-    if (!lastMessage) {
-      setStatus(undefined);
-    }
+  const { isDelivered, isRead } = useStateStore(
+    channel.messageReceiptsTracker.snapshotStore,
+    selector,
+  );
 
+  const status = useMemo<MessageDeliveryStatus | undefined>(() => {
     if (!isReadEventsEnabled) {
-      setStatus(MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER);
-      return;
+      return MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER;
     }
 
-    if (!lastMessage?.created_at || !isOwnMessage(lastMessage)) {
-      return;
+    const isOwnMessage = !!currentUserId && lastMessage?.user?.id === currentUserId;
+    if (lastMessage?.created_at == null || !isOwnMessage) {
+      return undefined;
     }
 
-    const msgRef = {
-      msgId: lastMessage.id,
-      timestampMs: new Date(lastMessage.created_at).getTime(),
-    };
-
-    const readerOfMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
-    const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
-
-    setStatus(
-      readerOfMessage.length > 1 ||
-        (readerOfMessage.length === 1 && readerOfMessage[0].id !== client.user?.id)
-        ? MessageDeliveryStatus.READ
-        : deliveredForMessage.length > 1 ||
-            (deliveredForMessage.length === 1 && deliveredForMessage[0].id !== client.user?.id)
-          ? MessageDeliveryStatus.DELIVERED
-          : MessageDeliveryStatus.SENT,
-    );
-  }, [channel, client.user?.id, isOwnMessage, isReadEventsEnabled, lastMessage]);
-
-  useEffect(() => {
-    const handleMessageNew = (event: Event) => {
-      // the last message is not mine, so do not show the delivery status
-      if (event.message && !isOwnMessage(event.message)) {
-        return setStatus(undefined);
-      }
-      return setStatus(MessageDeliveryStatus.SENT);
-    };
-    const { unsubscribe } = channel.on('message.new', handleMessageNew);
-    return unsubscribe;
-  }, [channel, isOwnMessage]);
-
-  useEffect(() => {
-    if (!isOwnMessage(lastMessage)) return;
-    const handleMessageDelivered = (event: Event) => {
-      if (
-        event.user?.id !== client.user?.id &&
-        lastMessage &&
-        lastMessage.id === event.last_delivered_message_id
-      )
-        setStatus(MessageDeliveryStatus.DELIVERED);
-    };
-
-    const handleMarkRead = (event: Event) => {
-      if (event.user?.id !== client.user?.id) setStatus(MessageDeliveryStatus.READ);
-    };
+    if (isRead) {
+      return MessageDeliveryStatus.READ;
+    }
 
-    const listeners = [
-      channel.on('message.delivered', handleMessageDelivered),
-      channel.on('message.read', handleMarkRead),
-    ];
+    if (isDelivered) {
+      return MessageDeliveryStatus.DELIVERED;
+    }
 
-    return () => listeners.forEach((l) => l.unsubscribe());
-  }, [channel, client, isOwnMessage, lastMessage]);
+    return MessageDeliveryStatus.SENT;
+  }, [currentUserId, isDelivered, isReadEventsEnabled, isRead, lastMessage]);
 
   return { status };
 };

package/src/hooks/messagePreview/useMessagePreviewText.tsx

@@ -1,12 +1,14 @@
 import dayjs from 'dayjs';
 import {
   DraftMessage,
-  LiveLocationPayload,
+  SharedLocationResponseData,
   LocalMessage,
   MessageResponse,
   PollState,
 } from 'stream-chat';
 
+import { nowNs } from 'stream-chat';
+
 import { useGroupedAttachments } from './useGroupedAttachments';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
@@ -38,7 +40,7 @@ export const useMessagePreviewText = ({
   const onlyVoiceRecordings =
     voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
   if (message?.type === 'deleted') {
-    return t('Message deleted');
+    return t('message.deleted.text', 'Message deleted');
   }
 
   if (pollName) {
@@ -46,18 +48,19 @@ export const useMessagePreviewText = ({
   }
 
   if (message?.shared_location) {
-    if (
-      // There is a problem with types in Draft Message, and its not able to infer the type of `end_at` correctly, so the `as` is used.
-      (message?.shared_location as LiveLocationPayload)?.end_at &&
-      new Date((message?.shared_location as LiveLocationPayload)?.end_at) > new Date()
-    ) {
-      return t('Live Location');
+    // Draft messages type `shared_location` loosely, hence the cast. The RESPONSE shape, not the
+    // request one: the value here came off a message, so `end_at` is the wire number rather than
+    // the `Date` an outgoing request would carry. `end_at` is optional because a static location
+    // has no expiry — only a live one does.
+    const { end_at: endAt } = message.shared_location as SharedLocationResponseData;
+    if (endAt != null && endAt > nowNs()) {
+      return t('messagePreview.liveLocation.label', 'Live Location');
     }
-    return t('Location');
+    return t('messagePreview.location.label', 'Location');
   }
 
   if (giphys?.length) {
-    return t('Giphy');
+    return t('messagePreview.giphy.label', 'Giphy');
   }
 
   if (message?.text) {
@@ -70,35 +73,53 @@ export const useMessagePreviewText = ({
 
   if (onlyImages) {
     if (images?.length === 1) {
-      return t('Photo');
+      return t('messagePreview.photo.label', 'Photo');
     } else {
-      return t('{{count}} Photos', { count: images?.length });
+      return t('messagePreview.photos.label', {
+        count: images?.length,
+        defaultValue_one: '{{count}} Photo',
+        defaultValue_other: '{{count}} Photos',
+      });
     }
   }
 
   if (onlyVideos) {
     if (videos?.length === 1) {
-      return t('Video');
+      return t('messagePreview.video.label', 'Video');
     } else {
-      return t(`{{count}} Videos`, { count: videos?.length });
+      return t('messagePreview.videos.label', {
+        count: videos?.length,
+        defaultValue_one: '{{count}} Video',
+        defaultValue_other: '{{count}} Videos',
+      });
     }
   }
 
   if (onlyAudio) {
     if (audios?.length === 1) {
-      return t('Audio');
+      return t('messagePreview.audio.label', 'Audio');
     } else {
-      return t('{{count}} Audios', { count: audios?.length });
+      return t('messagePreview.audios.label', {
+        count: audios?.length,
+        defaultValue_one: '{{count}} Audio',
+        defaultValue_other: '{{count}} Audios',
+      });
     }
   }
 
   if (onlyVoiceRecordings) {
     if (voiceRecordings?.length === 1) {
-      return t(`Voice message ({{duration}})`, {
-        duration: dayjs.duration(voiceRecordings?.[0]?.duration ?? 0, 'seconds').format('m:ss'),
+      return t('messagePreview.voiceMessage.label', 'Voice message ({{duration}})', {
+        duration: dayjs
+          .duration(voiceRecordings?.[0]?.custom?.duration ?? 0, 'seconds')
+          .format('m:ss'),
       });
     } else {
-      return t('{{count}} Voice messages', { count: voiceRecordings?.length });
+      return t('messagePreview.voiceMessages.label', {
+        count: voiceRecordings?.length,
+        defaultValue_one: '{{count}} Voice message',
+        defaultValue_other: '{{count}} Voice messages',
+      });
     }
   }
 
@@ -106,5 +127,9 @@ export const useMessagePreviewText = ({
     return files?.[0]?.title;
   }
 
-  return t('{{count}} Files', { count: attachmentsLength });
+  return t('messagePreview.files.label', {
+    count: attachmentsLength,
+    defaultValue_one: '{{count}} File',
+    defaultValue_other: '{{count}} Files',
+  });
 };

package/src/hooks/useAudioPlayer.ts

@@ -53,9 +53,15 @@ export const useAudioPlayer = ({
       if (!hasNotificationManager) return;
 
       const errorMessages: Record<AudioPlayerErrorCode, string> = {
-        'failed-to-start': t('Failed to play the recording'),
-        'not-playable': t('Recording format is not supported and cannot be reproduced'),
-        'seek-not-supported': t('Cannot seek in the recording'),
+        'failed-to-start': t('audioPlayer.playbackFailed.error', 'Failed to play the recording'),
+        'not-playable': t(
+          'audioPlayer.formatUnsupported.error',
+          'Recording format is not supported and cannot be reproduced',
+        ),
+        'seek-not-supported': t(
+          'audioPlayer.seekUnsupported.error',
+          'Cannot seek in the recording',
+        ),
       };
       const message = errorMessages[errCode];
 

package/src/hooks/useChannel.ts

@@ -0,0 +1,19 @@
+import type { Channel } from 'stream-chat';
+
+import { useChannelContext } from '../contexts/channelContext/ChannelContext';
+import { useThreadContext } from '../contexts/threadContext/ThreadContext';
+
+/**
+ * Resolves the active `Channel` instance: the thread's channel when rendered inside a
+ * thread, otherwise the `ChannelContext` channel.
+ *
+ * Thread-aware analogue of stream-chat-react's `useChannel()`. Prefer this over reading
+ * `channel` from `useChannelContext()` directly in message/thread interaction code, so the
+ * same code path targets the correct channel in both the main list and a thread.
+ */
+export const useChannel = (): Channel => {
+  const { channel } = useChannelContext();
+  const { thread } = useThreadContext();
+
+  return thread?.channel ?? channel;
+};

package/src/hooks/useChannelImage.ts

@@ -1,12 +1,16 @@
-import { Channel, EventTypes } from 'stream-chat';
+import { Channel } from 'stream-chat';
 
-import { useSelectedChannelState } from './useSelectedChannelState';
+import { useStateStore } from './useStateStore';
 
-const selector = (channel: Channel) => channel.data?.image;
-const keys: EventTypes[] = ['channel.updated'];
+const selector = (state: { data: Channel['data'] }) => ({
+  image: state.data?.custom?.image,
+});
 
+/**
+ * Returns the channel's image, sourced reactively from `channel.state` (updates on `channel.updated`).
+ */
 export function useChannelImage(channel: Channel): string | undefined;
 export function useChannelImage(channel?: Channel): string | undefined;
 export function useChannelImage(channel?: Channel) {
-  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+  return useStateStore(channel?.state, selector)?.image;
 }

package/src/hooks/useChannelMemberCount.ts

@@ -1,12 +1,17 @@
-import { Channel, EventTypes } from 'stream-chat';
+import { Channel } from 'stream-chat';
 
-import { useSelectedChannelState } from './useSelectedChannelState';
+import { useStateStore } from './useStateStore';
 
-const selector = (channel: Channel) => channel.data?.member_count ?? 0;
-const keys: EventTypes[] = ['channel.updated'];
+const selector = (state: { memberCount: number }) => ({
+  memberCount: state.memberCount,
+});
 
+/**
+ * Returns the channel's member count, sourced reactively from `channel.state` (updates on
+ * `channel.updated`).
+ */
 export function useChannelMemberCount(channel: Channel): number;
 export function useChannelMemberCount(channel?: Channel): number | undefined;
 export function useChannelMemberCount(channel?: Channel) {
-  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+  return useStateStore(channel?.state, selector)?.memberCount;
 }

package/src/hooks/useChannelMembershipState.ts

@@ -1,12 +1,17 @@
-import { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';
+import { Channel, ChannelMemberResponse } from 'stream-chat';
 
-import { useSelectedChannelState } from './useSelectedChannelState';
+import { useStateStore } from './useStateStore';
 
-const selector = (channel: Channel) => channel.state.membership;
-const keys: EventTypes[] = ['member.updated'];
+const selector = (state: { membership: ChannelMemberResponse }) => ({
+  membership: state.membership,
+});
 
+/**
+ * Returns the current user's membership for the channel, sourced reactively from `channel.state`
+ * (updates on `member.added`/`member.updated`).
+ */
 export function useChannelMembershipState(channel: Channel): ChannelMemberResponse;
 export function useChannelMembershipState(channel?: Channel): ChannelMemberResponse | undefined;
 export function useChannelMembershipState(channel?: Channel) {
-  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+  return useStateStore(channel?.state, selector)?.membership;
 }