From 298e658babde3863f4d282077a405bd3e454e56f Mon Sep 17 00:00:00 2001
From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Date: Fri, 27 Mar 2026 01:08:43 -0700
Subject: [PATCH] refactor: use functional state updates in hero carousel
 callbacks

Switched goTo, goToPrev, and goToNext from depending on activeIndex
to using functional setState updates. Removed activeIndex from the
autoplay effect dependency array since the timer callback already
uses a functional update. Callbacks are now stable references.

Fixes #951
---
 surfsense_web/components/ui/hero-carousel.tsx | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/surfsense_web/components/ui/hero-carousel.tsx b/surfsense_web/components/ui/hero-carousel.tsx
index 5760aad94..837b079a7 100644
--- a/surfsense_web/components/ui/hero-carousel.tsx
+++ b/surfsense_web/components/ui/hero-carousel.tsx
@@ -145,21 +145,26 @@ function HeroCarousel() {
 	const [isGifExpanded, setIsGifExpanded] = useState(false);
 	const directionRef = useRef<"forward" | "backward">("forward");
 
-	const goTo = useCallback(
-		(newIndex: number) => {
-			directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
-			setActiveIndex(newIndex);
-		},
-		[activeIndex]
-	);
+	const goTo = useCallback((newIndex: number) => {
+		setActiveIndex((prev) => {
+			directionRef.current = newIndex >= prev ? "forward" : "backward";
+			return newIndex;
+		});
+	}, []);
 
 	const goToPrev = useCallback(() => {
-		goTo(activeIndex <= 0 ? carouselItems.length - 1 : activeIndex - 1);
-	}, [activeIndex, goTo]);
+		setActiveIndex((prev) => {
+			directionRef.current = "backward";
+			return prev <= 0 ? carouselItems.length - 1 : prev - 1;
+		});
+	}, []);
 
 	const goToNext = useCallback(() => {
-		goTo(activeIndex >= carouselItems.length - 1 ? 0 : activeIndex + 1);
-	}, [activeIndex, goTo]);
+		setActiveIndex((prev) => {
+			directionRef.current = "forward";
+			return prev >= carouselItems.length - 1 ? 0 : prev + 1;
+		});
+	}, []);
 
 	const item = carouselItems[activeIndex];
 	const isForward = directionRef.current === "forward";