Compare commits

...

2 commits

Author SHA1 Message Date
51429045e6 Merge pull request 'chore(web): document set-state-in-effect on ThemeToggle localStorage read (#90)' (#93) from issue-90-themetoggle-lint-disable into master 2026-05-30 19:25:20 +00:00
le king fu
e9ddf27eab chore(web): document set-state-in-effect on ThemeToggle localStorage read (#90)
ThemeToggle's mount effect reads localStorage then setTheme, a pattern
react-hooks/set-state-in-effect flags. It is safe here: localStorage is
SSR-unavailable so the read must happen post-mount, and ThemeScript
already applies the dark class before hydration (no page FOUC). Add a
targeted eslint-disable-next-line with justification.

web/ lint is now green (0 errors).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-30 14:57:44 -04:00

View file

@ -12,6 +12,11 @@ export function ThemeToggle() {
useEffect(() => {
const stored = localStorage.getItem("sl-theme") as Theme | null;
// localStorage is unavailable during SSR, so the stored theme can only be
// read post-mount. ThemeScript already applies the `dark` class before
// hydration (no page FOUC); only the toggle icon corrects on mount. The
// rule is a false positive for this hydration-from-localStorage read.
// eslint-disable-next-line react-hooks/set-state-in-effect
if (stored) setTheme(stored);
}, []);