From 1705e881ecec036a2b65afeffaca6317d7e91ef9 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Sun, 29 Mar 2026 18:35:54 +0200
Subject: [PATCH] refactor: use functional setState in useCallback for stable
 callbacks in onboarding tour and sidebar

---
 .../layout/hooks/useSidebarState.ts           | 10 ++++-
 surfsense_web/components/onboarding-tour.tsx  | 42 +++++++++++--------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/surfsense_web/components/layout/hooks/useSidebarState.ts b/surfsense_web/components/layout/hooks/useSidebarState.ts
index 78631694d..63ecbe49a 100644
--- a/surfsense_web/components/layout/hooks/useSidebarState.ts
+++ b/surfsense_web/components/layout/hooks/useSidebarState.ts
@@ -37,8 +37,14 @@ export function useSidebarState(defaultCollapsed = false): UseSidebarStateReturn
 	}, []);
 
 	const toggleCollapsed = useCallback(() => {
-		setIsCollapsed(!isCollapsed);
-	}, [isCollapsed, setIsCollapsed]);
+		setIsCollapsedState(prev => {
+			const next = !prev;
+			try {
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			} catch {}
+			return next;
+		});
+	}, []);
 
 	// Keyboard shortcut: Cmd/Ctrl + \
 	useEffect(() => {
diff --git a/surfsense_web/components/onboarding-tour.tsx b/surfsense_web/components/onboarding-tour.tsx
index e5dd3a825..11d3b78fa 100644
--- a/surfsense_web/components/onboarding-tour.tsx
+++ b/surfsense_web/components/onboarding-tour.tsx
@@ -666,27 +666,33 @@ export function OnboardingTour() {
 	}, [targetEl, isActive]);
 
 	const handleNext = useCallback(() => {
-		if (stepIndex < TOUR_STEPS.length - 1) {
-			retryCountRef.current = 0;
-			setShouldAnimate(true);
-			setStepIndex(stepIndex + 1);
-		} else {
-			// Tour completed - save to localStorage
-			if (user?.id) {
-				const tourKey = `surfsense-tour-${user.id}`;
-				localStorage.setItem(tourKey, "true");
+		retryCountRef.current = 0;
+		setShouldAnimate(true);
+		setStepIndex(prev => {
+			if (prev < TOUR_STEPS.length - 1) {
+				return prev + 1;
+			} else {
+				// Tour completed - save to localStorage
+				if (user?.id) {
+					const tourKey = `surfsense-tour-${user.id}`;
+					localStorage.setItem(tourKey, "true");
+				}
+				setIsActive(false);
+				return prev;
 			}
-			setIsActive(false);
-		}
-	}, [stepIndex, user?.id]);
+		});
+	}, [user?.id]);
 
 	const handlePrev = useCallback(() => {
-		if (stepIndex > 0) {
-			retryCountRef.current = 0;
-			setShouldAnimate(true);
-			setStepIndex(stepIndex - 1);
-		}
-	}, [stepIndex]);
+		retryCountRef.current = 0;
+		setShouldAnimate(true);
+		setStepIndex(prev => {
+			if (prev > 0) {
+				return prev - 1;
+			}
+			return prev;
+		});
+	}, []);
 
 	const handleSkip = useCallback(() => {
 		// Tour skipped - save to localStorage