From 7351dbbad236e3d014a37d9c7b36e3ef884c8a24 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 5 Feb 2025 20:32:15 -0300
Subject: [PATCH] Change to useRef

---
 src/features/ui/components/timeline.tsx | 28 +++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/features/ui/components/timeline.tsx b/src/features/ui/components/timeline.tsx
index f6dfe4cf1..b45edf705 100644
--- a/src/features/ui/components/timeline.tsx
+++ b/src/features/ui/components/timeline.tsx
@@ -1,6 +1,6 @@
 import { debounce } from 'es-toolkit';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts';
 import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx';
@@ -34,7 +34,7 @@ const Timeline: React.FC<ITimeline> = ({
   const hasQueuedItems = useAppSelector(state => state.timelines.get(timelineId)?.totalQueuedItemsCount || 0);
 
   const [isInTop, setIsInTop] = useState<boolean>(window.scrollY < 50);
-  const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
 
   const handleDequeueTimeline = useCallback(() => {
@@ -58,18 +58,24 @@ const Timeline: React.FC<ITimeline> = ({
 
   useEffect(() => {
     if (isInTop) {
-      handleDequeueTimeline();
-      const interval = setInterval(handleDequeueTimeline, 2000);
-      setIntervalId(interval);
-      dispatch(setNotification({ timelineId: timelineId, value: false }));
-
-    } else if (intervalId) {
-      clearInterval(intervalId);
-      setIntervalId(null);
+      if (!intervalRef.current) {
+        handleDequeueTimeline();
+        const interval = setInterval(handleDequeueTimeline, 2000);
+        intervalRef.current = interval;
+        dispatch(setNotification({ timelineId: timelineId, value: false }));
+      }
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
     }
 
     return () => {
-      if (intervalId) clearInterval(intervalId);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
     };
   }, [isInTop, handleDequeueTimeline]);