useLocalStorage

localStorage is external mutable state that #react doesn't track, which is exactly what useSyncExternalStore is built for. Subscribe through it and you get the three things a hand-rolled useState + useEffect version usually drops: a server render that matches the client's first paint, updates when another tab writes, and updates when another instance of the hook on the same page writes.

@itsnas editor.tsx

codeeditor.tsx

'use client'
 
function Editor() {
  // @src/code/local-storage
  const [draft, setDraft] = useLocalStorage('editor:draft', '')
 
  return (
    <textarea
      value={draft}
      onChange={e => setDraft(e.target.value)}
      placeholder="Autosaved to this browser…"
    />
  )
}

main

Nas (@itsnas)

'use client'
 
export function useLocalStorage<T>(key: string, fallback: T) {
  const raw = useSyncExternalStore(
    subscribe,
    () => localStorage.getItem(key),
    () => null, // server + first client render: nothing stored
  )
 
  const value = useMemo<T>(
    () => (raw === null ? fallback : (JSON.parse(raw) as T)),
    [raw, fallback],
  )
 
  const setValue = useCallback(
    (next: T) => {
      localStorage.setItem(key, JSON.stringify(next))
      // native `storage` only fires in *other* tabs, nudge this one
      window.dispatchEvent(new StorageEvent('storage', { key }))
    },
    [key],
  )
 
  return [value, setValue] as const
}
 
function subscribe(onStoreChange: () => void) {
  window.addEventListener('storage', onStoreChange)
  return () => window.removeEventListener('storage', onStoreChange)
}

main

Nas (@itsnas)