TypeScript Local Storage backed state hook for React

use-local-stored-state.ts

import { useState, useEffect } from "react";

type Serializable =
  | null
  | boolean
  | number
  | string
  | Date
  | { toJSON(): string }
  | Serializable[]
  | { [key: string]: Serializable };

export default function useLocalStoredState(
  key: string,
  defaultValue?: Serializable
) {
  const storedValue = localStorage.getItem(key);

  const [value, setValue] = useState(
    storedValue !== null ? JSON.parse(storedValue) : defaultValue
  );

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

  return [value, setValue];
}