[CLNP-6022] Memoize useGroupChannel actions to prevent unnecessary re-rendering

src/modules/GroupChannel/components/MessageList/InfiniteList.tsx

@@ -1,4 +1,4 @@
-import React, { DependencyList, forwardRef, UIEventHandler, useLayoutEffect, useRef } from 'react';
+import React, { DependencyList, forwardRef, UIEventHandler, useCallback, useLayoutEffect, useRef } from 'react';
 import type { BaseMessage } from '@sendbird/chat/message';
 import { isAboutSame } from '../../../Channel/context/utils';
 import { SCROLL_BUFFER } from '../../../../utils/consts';
@@ -61,7 +61,7 @@ export const InfiniteList = forwardRef((props: Props, listRef: React.RefObject<H
     }
   }, [listRef.current, messages.length]);
 
-  const handleScroll: UIEventHandler<HTMLDivElement> = async () => {
+  const handleScroll: UIEventHandler<HTMLDivElement> = useCallback(async () => {
     if (!listRef.current) return;
     const list = listRef.current;
 
@@ -87,7 +87,7 @@ export const InfiniteList = forwardRef((props: Props, listRef: React.RefObject<H
     } else {
       direction.current = undefined;
     }
-  };
+  }, [listRef.current, messages.length]);
 
   return (
     <div className="sendbird-conversation__scroll-container">

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -112,10 +112,11 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     scrollRef,
     scrollPubSub,
     scrollDistanceFromBottomRef,
-    isScrollBottomReached,
     scrollPositionRef,
   } = useMessageListScroll(scrollBehavior, [state.currentChannel?.url]);
 
+  const { isScrollBottomReached } = state;
+
   // Configuration resolution
   const resolvedReplyType = getCaseResolvedReplyType(moduleReplyType ?? config.groupChannel.replyType).upperCase;
   const resolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType(
@@ -143,8 +144,8 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
         channels.forEach((it) => markAsReadScheduler.push(it));
       }
     },
-    onMessagesReceived: () => {
-      if (isScrollBottomReached && isContextMenuClosed()) {
+    onMessagesReceived: (messages) => {
+      if (isScrollBottomReached && isContextMenuClosed() && messages.length !== state.messages.length) {
         setTimeout(() => actions.scrollToBottom(true), 10);
       }
     },
@@ -157,7 +158,9 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
       onBackClick?.();
     },
     onChannelUpdated: (channel) => {
-      actions.setCurrentChannel(channel);
+      if (!state.currentChannel?.isEqual(channel)) {
+        actions.setCurrentChannel(channel);
+      }
     },
     logger: logger as any,
   });
@@ -196,7 +199,7 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     return () => {
       subscriptions.forEach(subscription => subscription.remove());
     };
-  }, [messageDataSource.initialized, state.currentChannel?.url, pubSub?.subscribe]);
+  }, [messageDataSource.initialized, state.currentChannel?.url]);
 
   // Starting point handling
   useEffect(() => {

src/modules/GroupChannel/context/__tests__/useMessageListScroll.spec.tsx

@@ -25,7 +25,6 @@ describe('useMessageListScroll', () => {
       const { result } = renderHook(() => useMessageListScroll('auto'));
 
       expect(result.current.scrollRef.current).toBe(null);
-      expect(result.current.isScrollBottomReached).toBe(true);
       expect(result.current.scrollDistanceFromBottomRef.current).toBe(0);
       expect(result.current.scrollPositionRef.current).toBe(0);
       expect(typeof result.current.scrollPubSub.publish).toBe('function');
@@ -63,7 +62,7 @@ describe('useMessageListScroll', () => {
         result.current.scrollPubSub.publish('scrollToBottom', {});
         await waitFor(() => {
           expect(result.current.scrollDistanceFromBottomRef.current).toBe(0);
-          expect(result.current.isScrollBottomReached).toBe(true);
+          expect(mockSetIsScrollBottomReached).toHaveBeenCalledWith(true);
         });
       });
     });

src/modules/GroupChannel/context/hooks/useGroupChannel.ts

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useContext, useMemo, useCallback } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { SendbirdError } from '@sendbird/chat';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -58,24 +58,21 @@ export const useGroupChannel = () => {
   const { markAsReadScheduler } = config;
   const state: GroupChannelState = useSyncExternalStore(store.subscribe, store.getState);
 
-  const flagActions = {
-    setAnimatedMessageId: (messageId: number | null) => {
-      store.setState(state => ({ ...state, animatedMessageId: messageId }));
-    },
+  const setAnimatedMessageId = useCallback((messageId: number | null) => {
+    store.setState(state => ({ ...state, animatedMessageId: messageId }));
+  }, []);
 
-    setIsScrollBottomReached: (isReached: boolean) => {
-      store.setState(state => ({ ...state, isScrollBottomReached: isReached }));
-    },
-  };
+  const setIsScrollBottomReached = useCallback((isReached: boolean) => {
+    store.setState(state => ({ ...state, isScrollBottomReached: isReached }));
+  }, []);
 
-  const scrollToBottom = async (animated?: boolean) => {
+  const scrollToBottom = useCallback(async (animated?: boolean) => {
     if (!state.scrollRef.current) return;
+    setAnimatedMessageId(null);
+    setIsScrollBottomReached(true);
+
     // wait a bit for scroll ref to be updated
     await delay();
-
-    flagActions.setAnimatedMessageId(null);
-    flagActions.setIsScrollBottomReached(true);
-
     if (config.isOnline && state.hasNext()) {
       await state.resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
     }
@@ -87,109 +84,127 @@ export const useGroupChannel = () => {
         markAsReadScheduler.push(state.currentChannel);
       }
     }
-  };
+  }, [state.scrollRef.current, config.isOnline, markAsReadScheduler]);
+
+  const scrollToMessage = useCallback(async (
+    createdAt: number,
+    messageId: number,
+    messageFocusAnimated?: boolean,
+    scrollAnimated?: boolean,
+  ) => {
+    const element = state.scrollRef.current;
+    const parentNode = element?.parentNode as HTMLDivElement;
+    const clickHandler = {
+      activate() {
+        if (!element || !parentNode) return;
+        element.style.pointerEvents = 'auto';
+        parentNode.style.cursor = 'auto';
+      },
+      deactivate() {
+        if (!element || !parentNode) return;
+        element.style.pointerEvents = 'none';
+        parentNode.style.cursor = 'wait';
+      },
+    };
+
+    clickHandler.deactivate();
+
+    setAnimatedMessageId(null);
+    const message = state.messages.find(
+      (it) => it.messageId === messageId || it.createdAt === createdAt,
+    );
+
+    if (message) {
+      const topOffset = getMessageTopOffset(message.createdAt);
+      if (topOffset) state.scrollPubSub.publish('scroll', { top: topOffset, animated: scrollAnimated });
+      if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
+    } else {
+      await state.resetWithStartingPoint(createdAt);
+      setTimeout(() => {
+        const topOffset = getMessageTopOffset(createdAt);
+        if (topOffset) {
+          state.scrollPubSub.publish('scroll', {
+            top: topOffset,
+            lazy: false,
+            animated: scrollAnimated,
+          });
+        }
+        if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
+      });
+    }
+    clickHandler.activate();
+  }, [setAnimatedMessageId, state.scrollRef.current, state.messages?.map(it => it?.messageId)]);
+
+  const toggleReaction = useCallback((message: SendableMessageType, emojiKey: string, isReacted: boolean) => {
+    if (!state.currentChannel) return;
+    if (isReacted) {
+      state.currentChannel.deleteReaction(message, emojiKey)
+        .catch(error => {
+          config.logger?.warning('Failed to delete reaction:', error);
+        });
+    } else {
+      state.currentChannel.addReaction(message, emojiKey)
+        .catch(error => {
+          config.logger?.warning('Failed to add reaction:', error);
+        });
+    }
+  }, [state.currentChannel?.deleteReaction, state.currentChannel?.addReaction]);
+
   const messageActions = useMessageActions({
     ...state,
     scrollToBottom,
   });
 
-  const actions: GroupChannelActions = useMemo(() => ({
-    setCurrentChannel: (channel: GroupChannel) => {
-      store.setState(state => ({
-        ...state,
-        currentChannel: channel,
-        fetchChannelError: null,
-        quoteMessage: null,
-        animatedMessageId: null,
-        nicknamesMap: new Map(
-          channel.members.map(({ userId, nickname }) => [userId, nickname]),
-        ),
-      }));
-    },
-
-    handleChannelError: (error: SendbirdError) => {
-      store.setState(state => ({
-        ...state,
-        currentChannel: null,
-        fetchChannelError: error,
-        quoteMessage: null,
-        animatedMessageId: null,
-      }));
-    },
-
-    setQuoteMessage: (message: SendableMessageType | null) => {
-      store.setState(state => ({ ...state, quoteMessage: message }));
-    },
-
+  const setCurrentChannel = useCallback((channel: GroupChannel) => {
+    store.setState(state => ({
+      ...state,
+      currentChannel: channel,
+      fetchChannelError: null,
+      quoteMessage: null,
+      animatedMessageId: null,
+      nicknamesMap: new Map(
+        channel.members.map(({ userId, nickname }) => [userId, nickname]),
+      ),
+    }));
+  }, []);
+
+  const handleChannelError = useCallback((error: SendbirdError) => {
+    store.setState(state => ({
+      ...state,
+      currentChannel: null,
+      fetchChannelError: error,
+      quoteMessage: null,
+      animatedMessageId: null,
+    }));
+  }, []);
+
+  const setQuoteMessage = useCallback((message: SendableMessageType | null) => {
+    store.setState(state => ({ ...state, quoteMessage: message }));
+  }, []);
+
+  const actions: GroupChannelActions = useMemo(() => {
+    return {
+      setCurrentChannel,
+      handleChannelError,
+      setQuoteMessage,
+      scrollToBottom,
+      scrollToMessage,
+      toggleReaction,
+      setAnimatedMessageId,
+      setIsScrollBottomReached,
+      ...messageActions,
+    };
+  }, [
+    setCurrentChannel,
+    handleChannelError,
+    setQuoteMessage,
     scrollToBottom,
-    scrollToMessage: async (
-      createdAt: number,
-      messageId: number,
-      messageFocusAnimated?: boolean,
-      scrollAnimated?: boolean,
-    ) => {
-      const element = state.scrollRef.current;
-      const parentNode = element?.parentNode as HTMLDivElement;
-      const clickHandler = {
-        activate() {
-          if (!element || !parentNode) return;
-          element.style.pointerEvents = 'auto';
-          parentNode.style.cursor = 'auto';
-        },
-        deactivate() {
-          if (!element || !parentNode) return;
-          element.style.pointerEvents = 'none';
-          parentNode.style.cursor = 'wait';
-        },
-      };
-
-      clickHandler.deactivate();
-
-      flagActions.setAnimatedMessageId(null);
-      const message = state.messages.find(
-        (it) => it.messageId === messageId || it.createdAt === createdAt,
-      );
-
-      if (message) {
-        const topOffset = getMessageTopOffset(message.createdAt);
-        if (topOffset) state.scrollPubSub.publish('scroll', { top: topOffset, animated: scrollAnimated });
-        if (messageFocusAnimated ?? true) flagActions.setAnimatedMessageId(messageId);
-      } else {
-        await state.resetWithStartingPoint(createdAt);
-        setTimeout(() => {
-          const topOffset = getMessageTopOffset(createdAt);
-          if (topOffset) {
-            state.scrollPubSub.publish('scroll', {
-              top: topOffset,
-              lazy: false,
-              animated: scrollAnimated,
-            });
-          }
-          if (messageFocusAnimated ?? true) flagActions.setAnimatedMessageId(messageId);
-        });
-      }
-
-      clickHandler.activate();
-    },
-
-    toggleReaction: (message: SendableMessageType, emojiKey: string, isReacted: boolean) => {
-      if (!state.currentChannel) return;
-
-      if (isReacted) {
-        state.currentChannel.deleteReaction(message, emojiKey)
-          .catch(error => {
-            config.logger?.warning('Failed to delete reaction:', error);
-          });
-      } else {
-        state.currentChannel.addReaction(message, emojiKey)
-          .catch(error => {
-            config.logger?.warning('Failed to add reaction:', error);
-          });
-      }
-    },
-    ...flagActions,
-    ...messageActions,
-  }), [store, state, config.isOnline, markAsReadScheduler]);
+    scrollToMessage,
+    toggleReaction,
+    setAnimatedMessageId,
+    setIsScrollBottomReached,
+    messageActions,
+  ]);
 
   return { state, actions };
 };

src/modules/GroupChannel/context/hooks/useMessageListScroll.tsx

@@ -32,7 +32,6 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto', deps: Dependen
 
   const [scrollPubSub] = useState(() => pubSubFactory<ScrollTopics, ScrollTopicUnion>({ publishSynchronous: true }));
   const {
-    state: { isScrollBottomReached },
     actions: { setIsScrollBottomReached },
   } = useGroupChannel();
 
@@ -99,8 +98,6 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto', deps: Dependen
   return {
     scrollRef,
     scrollPubSub,
-    isScrollBottomReached,
-    setIsScrollBottomReached,
     scrollDistanceFromBottomRef,
     scrollPositionRef,
   };

src/utils/storeManager.ts

@@ -1,3 +1,5 @@
+import isEqual from 'lodash/isEqual';
+
 // Referrence: https://github.com/pmndrs/zustand
 export type Store<T> = {
   getState: () => T;
@@ -7,7 +9,16 @@ export type Store<T> = {
 
 export function hasStateChanged<T>(prevState: T, updates: Partial<T>): boolean {
   return Object.entries(updates).some(([key, value]) => {
-    return prevState[key as keyof T] !== value;
+    if (typeof prevState[key as keyof T] === 'function' && typeof value === 'function') {
+      /**
+       * Function is not considered as state change. Why?
+       * Because function is not a value, it's a reference.
+       * If we consider non-memoized function as state change,
+       * it will always be true and cause unnecessary re-renders.
+       */
+      return false;
+    }
+    return !isEqual(prevState[key as keyof T], value);
   });
 }