From 6b5a98ebb3a0f8c5d50e0b4fe4f3fbc9a25cda36 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 9 Sep 2023 17:00:51 +0800
Subject: [PATCH] Prevent all the re-renders

Srsly this took me hours to debug
---
 src/components/status.jsx |  6 ++++--
 src/pages/status.jsx      | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 955b65e0..bc26d5fc 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -550,7 +550,9 @@ function Status({
           </MenuHeader>
           <MenuLink
             to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
-            onClick={onStatusLinkClick}
+            onClick={(e) => {
+              onStatusLinkClick(e, status);
+            }}
           >
             <Icon icon="arrow-right" />
             <span>View post by @{username || acct}</span>
@@ -1038,7 +1040,7 @@ function Status({
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
-                      onStatusLinkClick?.();
+                      onStatusLinkClick?.(e, status);
                     }}
                     class={`time ${open ? 'is-open' : ''}`}
                   >
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 44babe8e..ce0e7a5d 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -48,9 +48,10 @@ const MAX_WEIGHT = 5;
 
 let cachedRepliesToggle = {};
 let cachedStatusesMap = {};
+let scrollPositions = {};
 function resetScrollPosition(id) {
   delete cachedStatusesMap[id];
-  delete states.scrollPositions[id];
+  delete scrollPositions[id];
 }
 
 function StatusPage(params) {
@@ -184,7 +185,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       if (!scrollableRef.current) return;
       const { scrollTop } = scrollableRef.current;
       if (uiState !== 'loading') {
-        states.scrollPositions[id] = scrollTop;
+        scrollPositions[id] = scrollTop;
       }
     }, 50);
     scrollableRef.current?.addEventListener('scroll', onScroll, {
@@ -391,7 +392,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   useEffect(() => {
     if (!statuses.length) return;
     console.debug('STATUSES', statuses);
-    const scrollPosition = snapStates.scrollPositions[id];
+    const scrollPosition = scrollPositions[id];
     console.debug('scrollPosition', scrollPosition);
     if (!!scrollPosition) {
       console.debug('Case 1', {
@@ -449,7 +450,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   useEffect(() => {
     return () => {
       // RESET
-      states.scrollPositions = {};
+      scrollPositions = {};
       states.reloadStatusPage = 0;
       cachedStatusesMap = {};
       cachedRepliesToggle = {};
@@ -633,6 +634,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     [id],
   );
 
+  const handleStatusLinkClick = useCallback((e, status) => {
+    resetScrollPosition(status.id);
+  }, []);
+
   return (
     <div
       tabIndex="-1"
@@ -979,9 +984,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                       size={thread || ancestor ? 'm' : 's'}
                       enableTranslate
                       onMediaClick={handleMediaClick}
-                      onStatusLinkClick={() => {
-                        resetScrollPosition(statusID);
-                      }}
+                      onStatusLinkClick={handleStatusLinkClick}
                     />
                     {ancestor && isThread && repliesCount > 1 && (
                       <div class="replies-link">