The lazy initializer (() => ...) reads from localStorage only once, which avoids parsing JSON on every render. The setter accepts either a value or a functional updater, mirroring the setState API so callers can keep using setTheme((t) => t === 'light' ? 'dark' : 'light'). Wrapping reads and writes in try/catch handles two real failures: quota exceeded on the write side, and corrupt JSON or disabled storage on the read side. This is the right shape for a single-tab, client-only app.

Server rendering breaks the basic version because localStorage is undefined on the server, and reading it during the initial render also breaks React's hydration check (the server and client must produce identical markup on first render). The SSR-safe variant returns initialValue synchronously and reads from localStorage inside useEffect, which only runs on the client. The typeof window guard makes the hook safe in any framework that pre-renders. The trade-off is one extra render once the persisted value lands.

The browser fires a storage event on every other tab when one tab writes to localStorage (the writing tab itself does not receive it). Subscribing to that event lets you broadcast logout, theme changes, or shopping-cart updates across windows without any extra infrastructure. The cleanup that removes the listener is essential, otherwise stale handlers from unmounted components keep firing. Combine this with the SSR-safe pattern from the previous accordion when both constraints apply.