From b166847138c11f8872a1c63f441d488d41a78e0e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 8 Mar 2022 21:57:12 -0800
Subject: [PATCH] Use react state for first flag when fetching

---
 packages/web/lib/hooks/useFetchMoreScroll.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/lib/hooks/useFetchMoreScroll.tsx b/packages/web/lib/hooks/useFetchMoreScroll.tsx
index fbd2a9f81..685626e2e 100644
--- a/packages/web/lib/hooks/useFetchMoreScroll.tsx
+++ b/packages/web/lib/hooks/useFetchMoreScroll.tsx
@@ -19,7 +19,7 @@ export const useFetchMoreScroll = (
 }
 
 const useFetchMoreInternal = (node: HTMLDivElement | null, callback: () => void, delay = 500): void => {
-  let first = false
+  const [first, setFirst] = useState(true)
   const throttleTimeout = useRef<NodeJS.Timeout | undefined>(undefined)
 
   useEffect(() => {
@@ -42,7 +42,7 @@ const useFetchMoreInternal = (node: HTMLDivElement | null, callback: () => void,
 
     const handleScroll = () => {
       if (first) {
-        first = false
+        setFirst(false)
         callbackInternal()
         return
       }
@@ -56,5 +56,5 @@ const useFetchMoreInternal = (node: HTMLDivElement | null, callback: () => void,
     return () => {
       node.removeEventListener('scroll', handleScroll)
     }
-  }, [node, callback, delay])
+  }, [node, callback, delay, first, setFirst])
 }