useLocalStorage — useState backed by localStorage with cross-tab sync

import { useState, useEffect, useCallback } from "react";
 
function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => void, () => void] {
  // Lazy initializer reads from storage only once
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") return initialValue;
    try {
      const item = localStorage.getItem(key);
      return item !== null ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });
 
  // Persist to localStorage whenever value or key changes
  useEffect(() => {
    if (typeof window === "undefined") return;
    try {
      localStorage.setItem(key, JSON.stringify(storedValue));
    } catch {
      // Storage quota exceeded or unavailable
    }
  }, [key, storedValue]);
 
  // Sync across tabs via the storage event
  useEffect(() => {
    if (typeof window === "undefined") return;
 
    const handleStorage = (e: StorageEvent) => {
      if (e.key !== key) return;
      if (e.newValue === null) {
        setStoredValue(initialValue);
      } else {
        try {
          setStoredValue(JSON.parse(e.newValue) as T);
        } catch {
          // Ignore malformed JSON
        }
      }
    };
 
    window.addEventListener("storage", handleStorage);
    return () => window.removeEventListener("storage", handleStorage);
  }, [key, initialValue]);
 
  // Setter that matches useState signature (value or updater fn)
  const setValue = useCallback(
    (value: T | ((prev: T) => T)) => {
      setStoredValue((prev) => {
        const nextValue =
          value instanceof Function ? value(prev) : value;
        return nextValue;
      });
    },
    []
  );
 
  // Remove the key from storage and reset to initial
  const remove = useCallback(() => {
    if (typeof window !== "undefined") {
      localStorage.removeItem(key);
    }
    setStoredValue(initialValue);
  }, [key, initialValue]);
 
  return [storedValue, setValue, remove];
}

"use client";
 
function ThemeToggle() {
  const [theme, setTheme, removeTheme] = useLocalStorage<"light" | "dark">(
    "app-theme",
    "light"
  );
 
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}>
        Toggle Theme
      </button>
      <button onClick={removeTheme}>Reset to Default</button>
    </div>
  );
}
 
function FormDraft() {
  const [draft, setDraft] = useLocalStorage("form-draft", {
    name: "",
    email: "",
  });
 
  return (
    <form>
      <input
        value={draft.name}
        onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))}
        placeholder="Name"
      />
      <input
        value={draft.email}
        onChange={(e) => setDraft((d) => ({ ...d, email: e.target.value }))}
        placeholder="Email"
      />
      <p>Draft auto-saved to localStorage</p>
    </form>
  );
}

const item = JSON.parse(raw);
if (item.expiresAt && Date.now() > item.expiresAt) {
  localStorage.removeItem(key);
  return initialValue;
}
return item.value;