perf: messages rerendering on every composer change

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -9,6 +9,7 @@ import { useMessageActions } from './hooks/useMessageActions';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
+import { useMessageComposer } from '../../contexts';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -31,6 +32,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
+import { useStableCallback } from '../../hooks';
 import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
 import { FileTypes } from '../../types/types';
 import {
@@ -140,7 +142,10 @@ export type MessagePropsWithContext = Pick<
       'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated' | 'readBy'
     >
   > &
-  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy'> &
+  Pick<
+    MessageContextValue,
+    'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy' | 'setQuotedMessage'
+  > &
   Pick<
     MessagesContextValue,
     | 'sendReaction'
@@ -264,6 +269,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     threadList = false,
     updateMessage,
     readBy,
+    setQuotedMessage,
   } = props;
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
@@ -499,6 +505,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     retrySendMessage,
     sendReaction,
     setEditingState,
+    setQuotedMessage,
     supportedReactions,
   });
 
@@ -543,6 +550,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     selectReaction,
     sendReaction,
     setEditingState,
+    setQuotedMessage,
     supportedReactions,
     t,
     updateMessage,
@@ -691,6 +699,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     reactions,
     readBy,
     setIsEditedMessageOpen,
+    setQuotedMessage,
     showAvatar,
     showMessageOverlay,
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,
@@ -938,6 +947,10 @@ export const Message = (props: MessageProps) => {
   const { openThread } = useThreadContext();
   const { t } = useTranslationContext();
   const readBy = useMemo(() => getReadState(message, read), [message, read]);
+  const messageComposer = useMessageComposer();
+  const setQuotedMessage = useStableCallback((message: LocalMessage | null) =>
+    messageComposer.setQuotedMessage(message),
+  );
 
   return (
     <MemoizedMessage
@@ -951,6 +964,7 @@ export const Message = (props: MessageProps) => {
         messagesContext,
         openThread,
         readBy,
+        setQuotedMessage,
         t,
       }}
       {...props}

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -18,7 +18,6 @@ import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -70,6 +69,7 @@ export type MessageSimplePropsWithContext = Pick<
   | 'onlyEmojis'
   | 'otherAttachments'
   | 'showMessageStatus'
+  | 'setQuotedMessage'
 > &
   Pick<
     MessagesContextValue,
@@ -130,6 +130,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     ReactionListTop,
     showMessageStatus,
     shouldRenderSwipeableWrapper,
+    setQuotedMessage,
   } = props;
 
   const {
@@ -161,7 +162,6 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     isVeryLastMessage,
     messageGroupedSingleOrBottom,
   } = useMessageData({});
-  const messageComposer = useMessageComposer();
 
   const lastMessageInMessageListStyles = [styles.lastMessageContainer, lastMessageContainer];
   const messageGroupedSingleOrBottomStyles = {
@@ -215,8 +215,8 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
   );
 
   const onSwipeToReply = useCallback(() => {
-    messageComposer.setQuotedMessage(message);
-  }, [messageComposer, message]);
+    setQuotedMessage(message);
+  }, [setQuotedMessage, message]);
 
   const THRESHOLD = 25;
 
@@ -608,6 +608,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
     otherAttachments,
     showMessageStatus,
     isMessageAIGenerated,
+    setQuotedMessage,
   } = useMessageContext();
   const {
     enableMessageGroupingByUser,
@@ -662,6 +663,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
         ReactionListBottom,
         reactionListPosition,
         ReactionListTop,
+        setQuotedMessage,
         shouldRenderSwipeableWrapper,
         showMessageStatus,
       }}

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -41,6 +41,7 @@ export const useCreateMessageContext = ({
   showMessageStatus,
   threadList,
   videos,
+  setQuotedMessage,
 }: MessageContextValue) => {
   const groupStylesLength = groupStyles.length;
   const reactionsValue = reactions.map(({ count, own, type }) => `${own}${type}${count}`).join();
@@ -84,6 +85,7 @@ export const useCreateMessageContext = ({
       reactions,
       readBy,
       setIsEditedMessageOpen,
+      setQuotedMessage,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -3,7 +3,6 @@ import { Alert } from 'react-native';
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
-import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -18,6 +17,7 @@ export const useMessageActionHandlers = ({
   retrySendMessage,
   sendReaction,
   setEditingState,
+  setQuotedMessage,
 }: Pick<
   MessagesContextValue,
   | 'sendReaction'
@@ -29,13 +29,12 @@ export const useMessageActionHandlers = ({
 > &
   Pick<ChannelContextValue, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue, 'client'> &
-  Pick<MessageContextValue, 'message'>) => {
+  Pick<MessageContextValue, 'message' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
   const handleResendMessage = () => retrySendMessage(message);
-  const messageComposer = useMessageComposer();
 
   const handleQuotedReplyMessage = () => {
-    messageComposer.setQuotedMessage(message);
+    setQuotedMessage(message);
   };
 
   const isMuted = (client.mutedUsers || []).some(

package/src/components/Message/hooks/useMessageActions.tsx

@@ -58,7 +58,7 @@ export type MessageActionsHookProps = Pick<
   Pick<ChannelContextValue, 'channel' | 'enforceUniqueReaction'> &
   Pick<ChatContextValue, 'client'> &
   Pick<ThreadContextValue, 'openThread'> &
-  Pick<MessageContextValue, 'dismissOverlay' | 'message'> &
+  Pick<MessageContextValue, 'dismissOverlay' | 'message' | 'setQuotedMessage'> &
   Pick<TranslationContextValue, 't'> & {
     onThreadSelect?: (message: LocalMessage) => void;
   };
@@ -91,6 +91,7 @@ export const useMessageActions = ({
   setEditingState,
   supportedReactions,
   t,
+  setQuotedMessage,
 }: MessageActionsHookProps) => {
   const {
     theme: {
@@ -119,6 +120,7 @@ export const useMessageActions = ({
     retrySendMessage,
     sendReaction,
     setEditingState,
+    setQuotedMessage,
     supportedReactions,
   });
 

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { Attachment, LocalMessage } from 'stream-chat';
+import type { Attachment, LocalMessage, MessageComposer } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
 import { ReactionSummary } from '../../components/Message/hooks/useProcessReactions';
@@ -119,6 +119,7 @@ export type MessageContextValue = {
   preventPress?: boolean;
   /** Whether or not the avatar show show next to Message */
   showAvatar?: boolean;
+  setQuotedMessage: MessageComposer['setQuotedMessage'];
 } & Pick<ChannelContextValue, 'channel' | 'members'>;
 
 export const MessageContext = React.createContext(