More Hooks

Custom Hooks

A custom hook is a function starting with use that bundles hooks into reusable logic.

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// use it like useState, but it remembers between visits
const [theme, setTheme] = useLocalStorage("theme", "light");