Build a custom React hook that syncs state with localStorage (and across tabs)

function usePersistentState<T>(key: string, initial: T) {
  const [v, setV] = useState<T>(() => {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : initial;
  });
  useEffect(() => { localStorage.setItem(key, JSON.stringify(v)); }, [key, v]);
  return [v, setV] as const;
}

function usePersistentState<T>(key: string, initial: T) {
  const read = useCallback((): T => {
    if (typeof window === "undefined") return initial; // SSR
    try {
      const raw = window.localStorage.getItem(key);
      return raw === null ? initial : (JSON.parse(raw) as T);
    } catch {
      return initial;
    }
  }, [key, initial]);

  const [value, setValue] = useState<T>(read);

  // Persist on change
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch {
      // QuotaExceededError or serialization error — drop silently or surface a toast
    }
  }, [key, value]);

  // Cross-tab sync
  useEffect(() => {
    const onStorage = (e: StorageEvent) => {
      if (e.key === key && e.storageArea === window.localStorage) {
        try {
          setValue(e.newValue === null ? initial : (JSON.parse(e.newValue) as T));
        } catch {
          /* ignore corrupt write from another tab */
        }
      }
    };
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, [key, initial]);

  return [value, setValue] as const;
}

function usePersistentState<T>(key: string, initial: T) {
  const subscribe = useCallback((cb: () => void) => {
    const handler = (e: StorageEvent) => { if (e.key === key) cb(); };
    window.addEventListener("storage", handler);
    return () => window.removeEventListener("storage", handler);
  }, [key]);
  const getSnapshot = () => window.localStorage.getItem(key);
  const getServerSnapshot = () => null;
  const raw = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  const value = useMemo<T>(() => { try { return raw ? JSON.parse(raw) : initial; } catch { return initial; } }, [raw, initial]);
  const setValue = useCallback((next: T | ((prev: T) => T)) => {
    const updated = typeof next === "function" ? (next as any)(value) : next;
    window.localStorage.setItem(key, JSON.stringify(updated));
    // Manually trigger same-tab listeners (storage event doesn't fire in writing tab)
    window.dispatchEvent(new StorageEvent("storage", { key, newValue: JSON.stringify(updated) }));
  }, [key, value]);
  return [value, setValue] as const;
}