[CLNP-6660] Check memoization of custom hooks' actions

src/modules/CreateChannel/context/useCreateChannel.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { CreateChannelContext, CreateChannelState } from './CreateChannelProvider';
 import { CHANNEL_TYPE } from '../types';
 import { getCreateGroupChannel } from '../../../lib/selectors';
@@ -10,20 +10,30 @@ const useCreateChannel = () => {
   const sendbirdStore = useSendbirdStateContext();
   if (!store) throw new Error('useCreateChannel must be used within a CreateChannelProvider');
 
+  const setPageStep = useCallback((pageStep: number) => {
+    store.setState(state => ({ ...state, pageStep }));
+  }, []);
+
+  const setType = useCallback((type: CHANNEL_TYPE) => {
+    store.setState(state => ({ ...state, type }));
+  }, []);
+
+  const createChannel = useCallback((...params: Parameters<ReturnType<typeof getCreateGroupChannel>>) => {
+    const createChannel = getCreateGroupChannel(sendbirdStore);
+
+    return createChannel(...params);
+  }, [sendbirdStore]);
+
   const state: CreateChannelState = useSyncExternalStore(store.subscribe, store.getState);
   const actions = useMemo(() => ({
-    setPageStep: (pageStep: number) => store.setState(state => ({
-      ...state,
-      pageStep,
-    })),
-
-    setType: (type: CHANNEL_TYPE) => store.setState(state => ({
-      ...state,
-      type,
-    })),
-
-    createChannel: getCreateGroupChannel(sendbirdStore),
-  }), [store]);
+    setPageStep,
+    setType,
+    createChannel,
+  }), [
+    setPageStep,
+    setType,
+    createChannel,
+  ]);
 
   return { state, actions };
 };

src/modules/MessageSearch/context/hooks/useMessageSearch.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import { MessageSearchQuery } from '@sendbird/chat/message';
 
@@ -11,73 +11,93 @@ const useMessageSearch = () => {
   if (!store) throw new Error('useMessageSearch must be used within a MessageSearchProvider');
 
   const state: MessageSearchState = useSyncExternalStore(store.subscribe, store.getState);
-  const actions = useMemo(() => ({
-    setCurrentChannel: (channel: GroupChannel) => store.setState(state => ({
-      ...state,
-      currentChannel: channel,
-      initialized: true,
-    })),
 
-    setChannelInvalid: () => store.setState(state => ({
-      ...state,
-      currentChannel: null,
-      initialized: false,
-    })),
-
-    getSearchedMessages: (messages: ClientSentMessages[], createdQuery: MessageSearchQuery) => {
-      store.setState(state => {
-        if (createdQuery && createdQuery.channelUrl === state.currentMessageSearchQuery?.channelUrl
-            && (createdQuery as any).key === (state.currentMessageSearchQuery as any).key) {
-          return {
-            ...state,
-            loading: false,
-            isInvalid: false,
-            allMessages: messages,
-            hasMoreResult: state.currentMessageSearchQuery.hasNext,
-          };
-        }
-        return state;
-      });
-    },
-
-    setQueryInvalid: () => store.setState(state => ({ ...state, isInvalid: true })),
-
-    startMessageSearch: () => store.setState(state => ({
-      ...state,
-      isInvalid: false,
-      loading: false,
-    })),
+  const setCurrentChannel = useCallback((channel: GroupChannel) => {
+    store.setState(state => ({ ...state, currentChannel: channel, initialized: true }));
+  }, []);
 
-    startGettingSearchedMessages: (query: MessageSearchQuery) => store.setState(state => ({
-      ...state,
-      loading: true,
-      currentMessageSearchQuery: query,
-    })),
+  const setChannelInvalid = useCallback(() => {
+    store.setState(state => ({ ...state, currentChannel: null, initialized: false }));
+  }, []);
+
+  const getSearchedMessages = useCallback((messages: ClientSentMessages[], createdQuery: MessageSearchQuery) => {
+    store.setState(state => {
+      if (createdQuery && createdQuery.channelUrl === state.currentMessageSearchQuery?.channelUrl
+        && (createdQuery as any).key === (state.currentMessageSearchQuery as any).key) {
+        return {
+          ...state,
+          loading: false,
+          isInvalid: false,
+          allMessages: messages,
+          hasMoreResult: state.currentMessageSearchQuery.hasNext,
+        };
+      }
+      return state;
+    });
+  }, []);
+
+  const setQueryInvalid = useCallback(() => {
+    store.setState(state => ({ ...state, isInvalid: true }));
+  }, []);
 
-    getNextSearchedMessages: (messages: ClientSentMessages[]) => store.setState(state => ({
+  const startMessageSearch = useCallback(() => {
+    store.setState(state => ({ ...state, isInvalid: false, loading: false }));
+  }, []);
+
+  const startGettingSearchedMessages = useCallback((query: MessageSearchQuery) => {
+    store.setState(state => ({ ...state, loading: true, currentMessageSearchQuery: query }));
+  }, []);
+
+  const getNextSearchedMessages = useCallback((messages: ClientSentMessages[]) => {
+    store.setState(state => ({
       ...state,
       allMessages: [...state.allMessages, ...messages],
       hasMoreResult: state.currentMessageSearchQuery?.hasNext || false,
-    })),
+    }));
+  }, []);
 
-    resetSearchString: () => store.setState(state => ({ ...state, allMessages: [] })),
+  const resetSearchString = useCallback(() => {
+    store.setState(state => ({ ...state, allMessages: [] }));
+  }, []);
 
-    setSelectedMessageId: (messageId: number) => store.setState(state => ({
-      ...state,
-      selectedMessageId: messageId,
-    })),
+  const setSelectedMessageId = (messageId: number) => useCallback(() => {
+    store.setState(state => ({ ...state, selectedMessageId: messageId }));
+  }, []);
 
-    handleRetryToConnect: () => store.setState(state => ({
-      ...state,
-      retryCount: state.retryCount + 1,
-    })),
+  const handleRetryToConnect = useCallback(() => {
+    store.setState(state => ({ ...state, retryCount: state.retryCount + 1 }));
+  }, []);
 
-    // Looks exactly same as handleRetryToConnect but keep just for backward compatibility
-    setRetryCount: () => store.setState(state => ({
-      ...state,
-      retryCount: state.retryCount + 1,
-    })),
-  }), [store]);
+  // Looks exactly same as handleRetryToConnect but keep just for backward compatibility
+  const setRetryCount = useCallback(() => {
+    store.setState(state => ({ ...state, retryCount: state.retryCount + 1 }));
+  }, []);
+
+  const actions = useMemo(() => ({
+    setCurrentChannel,
+    setChannelInvalid,
+    getSearchedMessages,
+    setQueryInvalid,
+    startMessageSearch,
+    startGettingSearchedMessages,
+    getNextSearchedMessages,
+    resetSearchString,
+    setSelectedMessageId,
+    handleRetryToConnect,
+    setRetryCount,
+  }), [
+    setCurrentChannel,
+    setChannelInvalid,
+    getSearchedMessages,
+    setQueryInvalid,
+    startMessageSearch,
+    startGettingSearchedMessages,
+    getNextSearchedMessages,
+    resetSearchString,
+    setSelectedMessageId,
+    handleRetryToConnect,
+    setRetryCount,
+  ]);
 
   return { state, actions };
 };

src/modules/Thread/context/hooks/useDeleteMessageCallback.ts

@@ -47,5 +47,9 @@ export default function useDeleteMessageCallback({
           reject(err);
         });
     });
-  }, [currentChannel]);
+  }, [
+    currentChannel,
+    onMessageDeletedByReqId,
+    onMessageDeleted,
+  ]);
 }

src/modules/Thread/context/hooks/useResendMessageCallback.ts

@@ -140,5 +140,10 @@ export default function useResendMessageCallback({
       failedMessage.sendingStatus = SendingStatus.FAILED;
       sendMessageFailure(failedMessage);
     }
-  }, [currentChannel]);
+  }, [
+    currentChannel,
+    resendMessageStart,
+    sendMessageSuccess,
+    sendMessageFailure,
+  ]);
 }

src/modules/Thread/context/hooks/useSendFileMessage.ts

@@ -88,6 +88,11 @@ export default function useSendFileMessageCallback({
       }
     });
   },
-  [currentChannel],
+  [
+    currentChannel,
+    onBeforeSendFileMessage,
+    sendMessageStart,
+    sendMessageFailure,
+  ],
   );
 }

src/modules/Thread/context/hooks/useSendUserMessageCallback.ts

@@ -85,6 +85,12 @@ export default function useSendUserMessageCallback({
           });
         });
     }
-  }, [isMentionEnabled, currentChannel]);
+  }, [
+    isMentionEnabled,
+    currentChannel,
+    onBeforeSendUserMessage,
+    sendMessageStart,
+    sendMessageFailure,
+  ]);
   return sendMessage;
 }

src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts

@@ -103,6 +103,8 @@ export const useSendVoiceMessageCallback = ({
   }, [
     currentChannel,
     onBeforeSendVoiceMessage,
+    sendMessageStart,
+    sendMessageFailure,
   ]);
   return sendMessage;
 };

src/modules/Thread/context/hooks/useThreadFetchers.ts

@@ -74,7 +74,15 @@ export const useThreadFetchers = ({
         initializeThreadListFailure();
       }
     },
-    [stores.sdkStore.initialized, staleParentMessage, anchorMessage, isReactionEnabled],
+    [
+      stores.sdkStore.initialized,
+      staleParentMessage,
+      anchorMessage,
+      isReactionEnabled,
+      initializeThreadListStart,
+      initializeThreadListSuccess,
+      initializeThreadListFailure,
+    ],
   );
 
   const loadPrevious = useCallback(
@@ -96,7 +104,15 @@ export const useThreadFetchers = ({
         getPrevMessagesFailure();
       }
     },
-    [threadListState, oldestMessageTimeStamp, isReactionEnabled, staleParentMessage],
+    [
+      threadListState,
+      oldestMessageTimeStamp,
+      isReactionEnabled,
+      staleParentMessage,
+      getPrevMessagesStart,
+      getPrevMessagesSuccess,
+      getPrevMessagesFailure,
+    ],
   );
 
   const loadNext = useCallback(
@@ -117,7 +133,15 @@ export const useThreadFetchers = ({
         getNextMessagesFailure();
       }
     },
-    [threadListState, latestMessageTimeStamp, isReactionEnabled, staleParentMessage],
+    [
+      threadListState,
+      latestMessageTimeStamp,
+      isReactionEnabled,
+      staleParentMessage,
+      getNextMessagesStart,
+      getNextMessagesSuccess,
+      getNextMessagesFailure,
+    ],
   );
 
   return {

src/modules/Thread/context/hooks/useUpdateMessageCallback.ts

@@ -79,5 +79,9 @@ export default function useUpdateMessageCallback({
           },
         );
       });
-  }, [currentChannel, isMentionEnabled]);
+  }, [
+    currentChannel,
+    isMentionEnabled,
+    onMessageUpdated,
+  ]);
 }