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>
This commit is contained in:
parent
7750214c64
commit
e9ddf27eab
1 changed files with 5 additions and 0 deletions
|
|
@ -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);
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue