fix(theme-toggle): use functional setIsDark in toggleTheme (#1247)

Closes #1247.

toggleTheme's previous implementation read isDark from the closure via
setIsDark(!isDark), which forced isDark into the useCallback dependency
array. As a result toggleTheme's reference changed on every click,
invalidating any downstream memoization.

Switched to the functional updater setIsDark((prev) => !prev) and
dropped isDark from the dependency list. The sibling setCrazyLightTheme
and setCrazyDarkTheme callbacks already use this pattern (they pass
concrete values to setIsDark without listing isDark in deps), so this
keeps the three theme callbacks consistent.

No observable behavior change — clicking the theme toggle still flips
isDark. The callback reference is now stable between clicks, which is
also safer under concurrent updates per React's standard guidance.
This commit is contained in:
Matt Van Horn 2026-04-20 01:58:20 -07:00
parent 2b2453e015
commit 8cf957b301
No known key found for this signature in database

View file

@ -586,7 +586,7 @@ export const useThemeToggle = ({
}, []);
const toggleTheme = useCallback(() => {
setIsDark(!isDark);
setIsDark((prev) => !prev);
const animation = createAnimation(variant, start, blur, gifUrl);
@ -604,7 +604,7 @@ export const useThemeToggle = ({
}
document.startViewTransition(switchTheme);
}, [theme, setTheme, variant, start, blur, gifUrl, updateStyles, isDark]);
}, [theme, setTheme, variant, start, blur, gifUrl, updateStyles]);
const setCrazyLightTheme = useCallback(() => {
setIsDark(false);