useLocalStorage

useLocalStorage.ts

import { useCallback, useMemo, useState } from 'react';
import { LOCAL_STORAGE_KEY } from '../constants';

export function useLocalStorage<T extends object>(): {
  parsedData: T;
  loadLocalStorageData: () => Promise<T>;
  setLocalStorageData: (data: T) => void;
  clear: () => void;
} {
  const [localStorageRawData, setLocalStorageRawData] = useState<string>('{}');
  const parsedData: T = useMemo(() => JSON.parse(localStorageRawData), [localStorageRawData]);

  const loadLocalStorageData = useCallback(async () => {
    const rawData = window.localStorage.getItem(LOCAL_STORAGE_KEY) || '{}';
    setLocalStorageRawData(rawData);
    return JSON.parse(rawData);
  }, []);
  const setLocalStorageData = useCallback(
    (data: T) => {
      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(data));
      loadLocalStorageData();
    },
    [loadLocalStorageData],
  );
  const clear = useCallback(() => {
    window.localStorage.clear();
    setLocalStorageRawData('{}');
  }, []);

  return {
    parsedData,
    loadLocalStorageData,
    setLocalStorageData,
    clear,
  };
}