fix: save a render cycle through restructuring

Author: isekovanic

package/src/components/MessageList/MessageFlashList.tsx

@@ -400,26 +400,17 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [disabled]);
 
-  /**
-   * Check if a messageId needs to be scrolled to after list loads, and scroll to it
-   * Note: This effect fires on every list change with a small debounce so that scrolling isnt abrupted by an immediate rerender
-   */
-  useEffect(() => {
-    if (!targetedMessage) {
-      return;
-    }
-
+  const goToMessage = useStableCallback(async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
-      (message) => message?.id === targetedMessage,
+      (message) => message?.id === messageId,
     );
 
     // the message we want to scroll to has not been loaded in the state yet
     if (indexOfParentInMessageList === -1) {
-      loadChannelAroundMessage({ messageId: targetedMessage, setTargetedMessage });
+      await loadChannelAroundMessage({ messageId, setTargetedMessage });
     } else {
       scrollToDebounceTimeoutRef.current = setTimeout(() => {
         clearTimeout(scrollToDebounceTimeoutRef.current);
-
         // now scroll to it
         flashListRef.current?.scrollToIndex({
           animated: true,
@@ -429,12 +420,20 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         setTargetedMessage(undefined);
       }, WAIT_FOR_SCROLL_TIMEOUT);
     }
-  }, [loadChannelAroundMessage, processedMessageList, setTargetedMessage, targetedMessage]);
-
-  const goToMessage = useStableCallback((messageId: string) => {
-    setTargetedMessage(messageId);
   });
 
+  /**
+   * Check if a messageId needs to be scrolled to after list loads, and scroll to it
+   * Note: This effect fires on every list change with a small debounce so that scrolling isnt abrupted by an immediate rerender
+   */
+  useEffect(() => {
+    if (!targetedMessage) {
+      return;
+    }
+
+    goToMessage(targetedMessage);
+  }, [targetedMessage, goToMessage]);
+
   useEffect(() => {
     /**
      * Condition to check if a message is removed from MessageList.

package/src/components/MessageList/MessageList.tsx

@@ -713,7 +713,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     try {
       if (indexOfParentInMessageList === -1) {
         await loadChannelAroundMessage({ messageId });
-        return;
       } else {
         if (!flatListRef.current) {
           return;
@@ -729,7 +728,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           index: indexOfParentInMessageList,
           viewPosition: 0.5, // try to place message in the center of the screen
         });
-        return;
       }
     } catch (e) {
       console.warn('Error while scrolling to message', e);
@@ -745,34 +743,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       return;
     }
     scrollToDebounceTimeoutRef.current = setTimeout(async () => {
-      const indexOfParentInMessageList = processedMessageList.findIndex(
-        (message) => message?.id === targetedMessage,
-      );
-
-      // the message we want to scroll to has not been loaded in the state yet
-      if (indexOfParentInMessageList === -1) {
-        await loadChannelAroundMessage({ messageId: targetedMessage, setTargetedMessage });
-      } else {
-        if (!flatListRef.current) {
-          return;
-        }
-        // By a fresh scroll we should clear the retries for the previous failed scroll
-        clearTimeout(scrollToDebounceTimeoutRef.current);
-        clearTimeout(failScrollTimeoutId.current);
-        // reset the retry count
-        scrollToIndexFailedRetryCountRef.current = 0;
-        // now scroll to it
-        flatListRef.current.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5, // try to place message in the center of the screen
-        });
-        setTargetedMessage(undefined);
-      }
+      await goToMessage(targetedMessage);
     }, WAIT_FOR_SCROLL_TIMEOUT);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [targetedMessage]);
+    return () => {
+      clearTimeout(scrollToDebounceTimeoutRef.current);
+    };
+  }, [goToMessage, targetedMessage]);
 
   const renderItem = useCallback(
     ({ index, item: message }: { index: number; item: LocalMessage }) => {