useShallow

src/views/Conversations/Components/Messages.jsx

@@ -2,11 +2,13 @@ import { useEffect, useState, useRef, useMemo } from 'react';
 import { Image, Alert } from 'antd';
 import { MessageBox } from 'react-chat-elements';
 import useConversationStore from '@/stores/ConversationStore';
+import { useShallow } from 'zustand/react/shallow';
 
 const Messages = () => {
-  const { activeConversations, currentConversation, setReferenceMsg } = useConversationStore();
+  const { currentConversation, setReferenceMsg } = useConversationStore();
+  const activeMessages = useConversationStore(useShallow(state => currentConversation.sn ? state.activeConversations[currentConversation.sn] : []));
 
-  const messagesList = useMemo(() => (activeConversations[currentConversation.sn] || []).map(message => ({
+  const messagesList = useMemo(() => (activeMessages || []).map(message => ({
     ...message,
     key: message.id,
     position: message.sender === 'me' ? 'right' : 'left',
@@ -21,7 +23,7 @@ const Messages = () => {
       replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
       onReplyClick: () => (setReferenceMsg(message)),
     }),
-  })), [activeConversations, currentConversation.sn]);
+  })), [activeMessages, currentConversation.sn]);
   console.log('messagesList----------------------------------------------------', messagesList);
 
   const messagesEndRef = useRef(null);