useLocalStorage

useLocalStorage.ts

import { useCallback, useState } from 'react';

// like `useState`, but also persists to local storage
export default function useLocalStorage<T>(key: string, initialValue: T): [T, (initialValue: T) => void] {
  const [state, setState] = useState<T>(() => {
    try {
      const value = localStorage.getItem(key);
      return value ? JSON.parse(value) : initialValue;
    } catch (e) {
      return initialValue;
    }
  });

  const set = useCallback((key: string, value: T) => {
    localStorage.setItem(key, JSON.stringify(value));
    setState(value);
  }, []);

  return [state, (value: T) => set(key, value)];
}