fix: add useMessageReadData optimization

Author: khushal87

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

@@ -3,9 +3,11 @@ import { useCallback, useEffect, useState } from 'react';
 import { LocalMessage } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 export const useMessageReadData = ({ message }: { message: LocalMessage }) => {
   const { channel } = useChannelContext();
+  const { client } = useChatContext();
   const calculate = useCallback(() => {
     if (!message.created_at) {
       return 0;
@@ -21,9 +23,15 @@ export const useMessageReadData = ({ message }: { message: LocalMessage }) => {
   const [readBy, setReadBy] = useState<number>(calculate());
 
   useEffect(() => {
-    const { unsubscribe } = channel.on('message.read', () => setReadBy(calculate()));
+    const { unsubscribe } = channel.on('message.read', (event) => {
+      /**
+       * Optimization to only calculate when the event is from a different user.
+       * i.e. we don't show read status for received messages.
+       */
+      if (event.user?.id !== client.user?.id) setReadBy(calculate());
+    });
     return unsubscribe;
-  }, [channel, calculate]);
+  }, [channel, calculate, client.user?.id]);
 
   return readBy;
 };