React hook for localStorage. Has the same interface as useState.

useLocalStorage.ts

import { useEffect, useState } from "react";

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [state, setState] = useState<T>(() => {
    const json = localStorage.getItem(key);
    return json ? JSON.parse(json) : initialValue;
  });

  // a wrapper over setState, but it also save given value to localStorage
  function setStorage(value: T | ((v: T) => T)) {
    const data = value instanceof Function ? value(state) : value;
    const json = JSON.stringify(data);
    localStorage.setItem(key, json);
    setState(data);
  }

  return [state, setStorage] as const;
}