Revert "fix: save a render cycle through restructuring"

This reverts commit 38ca199.

Author: isekovanic

package/src/components/MessageList/MessageFlashList.tsx

@@ -400,17 +400,26 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [disabled]);
 
-  const goToMessage = useStableCallback(async (messageId: string) => {
+  /**
+   * 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 indexOfParentInMessageList = processedMessageList.findIndex(
-      (message) => message?.id === messageId,
+      (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, setTargetedMessage });
+      loadChannelAroundMessage({ messageId: targetedMessage, setTargetedMessage });
     } else {
       scrollToDebounceTimeoutRef.current = setTimeout(() => {
         clearTimeout(scrollToDebounceTimeoutRef.current);
+
         // now scroll to it
         flashListRef.current?.scrollToIndex({
           animated: true,
@@ -420,19 +429,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         setTargetedMessage(undefined);
       }, WAIT_FOR_SCROLL_TIMEOUT);
     }
-  });
+  }, [loadChannelAroundMessage, processedMessageList, setTargetedMessage, targetedMessage]);
 
-  /**
-   * 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]);
+  const goToMessage = useStableCallback((messageId: string) => {
+    setTargetedMessage(messageId);
+  });
 
   useEffect(() => {
     /**

package/src/components/MessageList/MessageList.tsx

@@ -713,6 +713,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     try {
       if (indexOfParentInMessageList === -1) {
         await loadChannelAroundMessage({ messageId });
+        return;
       } else {
         if (!flatListRef.current) {
           return;
@@ -728,6 +729,7 @@ 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);
@@ -743,13 +745,34 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       return;
     }
     scrollToDebounceTimeoutRef.current = setTimeout(async () => {
-      await goToMessage(targetedMessage);
+      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);
+      }
     }, WAIT_FOR_SCROLL_TIMEOUT);
 
-    return () => {
-      clearTimeout(scrollToDebounceTimeoutRef.current);
-    };
-  }, [goToMessage, targetedMessage]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetedMessage]);
 
   const renderItem = useCallback(
     ({ index, item: message }: { index: number; item: LocalMessage }) => {