react-hookbox/hooks/useLocalStorage.ts

react-hookbox is a comprehensive utility hook library for React developers, offering a diverse set of essential hooks to streamline and enhance your development process. Simplify complex tasks, handle common functionalities effortlessly, and boost your pr

import React, { useCallback } from 'react'



export const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T) => void] => {
  const [storedValue, setStoredValue] = React.useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      console.error('Error retrieving data from local storage:', error);
      return initialValue;
    }
  })

  const setValue = useCallback((value: T) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      window.localStorage.setItem(key, JSON.stringify(valueToStore))
    } catch (error) {
      console.error('Error setting data to local storage:', error);
    }
  }, [key]
  );


  return [storedValue, setValue]
}