refactor: use functional setState in useCallback for stable callbacks in onboarding tour and sidebar

This commit is contained in:
JoeMakuta 2026-03-29 18:35:54 +02:00
parent 3724a1530c
commit 1705e881ec
2 changed files with 32 additions and 20 deletions

View file

@ -37,8 +37,14 @@ export function useSidebarState(defaultCollapsed = false): UseSidebarStateReturn
}, []); }, []);
const toggleCollapsed = useCallback(() => { const toggleCollapsed = useCallback(() => {
setIsCollapsed(!isCollapsed); setIsCollapsedState(prev => {
}, [isCollapsed, setIsCollapsed]); const next = !prev;
try {
document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
} catch {}
return next;
});
}, []);
// Keyboard shortcut: Cmd/Ctrl + \ // Keyboard shortcut: Cmd/Ctrl + \
useEffect(() => { useEffect(() => {

View file

@ -666,27 +666,33 @@ export function OnboardingTour() {
}, [targetEl, isActive]); }, [targetEl, isActive]);
const handleNext = useCallback(() => { const handleNext = useCallback(() => {
if (stepIndex < TOUR_STEPS.length - 1) { retryCountRef.current = 0;
retryCountRef.current = 0; setShouldAnimate(true);
setShouldAnimate(true); setStepIndex(prev => {
setStepIndex(stepIndex + 1); if (prev < TOUR_STEPS.length - 1) {
} else { return prev + 1;
// Tour completed - save to localStorage } else {
if (user?.id) { // Tour completed - save to localStorage
const tourKey = `surfsense-tour-${user.id}`; if (user?.id) {
localStorage.setItem(tourKey, "true"); const tourKey = `surfsense-tour-${user.id}`;
localStorage.setItem(tourKey, "true");
}
setIsActive(false);
return prev;
} }
setIsActive(false); });
} }, [user?.id]);
}, [stepIndex, user?.id]);
const handlePrev = useCallback(() => { const handlePrev = useCallback(() => {
if (stepIndex > 0) { retryCountRef.current = 0;
retryCountRef.current = 0; setShouldAnimate(true);
setShouldAnimate(true); setStepIndex(prev => {
setStepIndex(stepIndex - 1); if (prev > 0) {
} return prev - 1;
}, [stepIndex]); }
return prev;
});
}, []);
const handleSkip = useCallback(() => { const handleSkip = useCallback(() => {
// Tour skipped - save to localStorage // Tour skipped - save to localStorage