React custom hook: useLocalStorage

This hook provides a simple way to persist component state in the browser's localStorage while remaining safe for Server-Side Rendering (SSR) in frameworks like Next.js.

import { useState, useEffect } from "react";
 
export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
  // Prevent SSR crashes by returning initialValue if window is undefined
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.warn(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });
 
  // State setter that logs/saves changes
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.warn(`Error setting localStorage key "${key}":`, error);
    }
  };
 
  return [storedValue, setValue];
}

Usage Example

import { useLocalStorage } from "./useLocalStorage";
 
export default function ThemeSettings() {
  const [theme, setTheme] = useLocalStorage("ui-theme", "light");
 
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle Theme: {theme}
    </button>
  );
}