Custom react hook for persisted state without use state

helper.ts

import { useState } from 'react';

export default function usePersistedState<T>(
  key: string,
  initialValue: T
): [T, React.Dispatch<React.SetStateAction<T>>] {
  // Initialize state with a function to avoid unnecessary localStorage calls
  const [value, setValueState] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      // Only parse if item exists
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch (error) {
      console.warn(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  // Wrapper function to handle both state and localStorage updates
  const setValue: React.Dispatch<React.SetStateAction<T>> = (newValue) => {
    try {
      // Handle both direct values and updater functions
      const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
      
      // Update state
      setValueState(valueToStore);
      
      // Update localStorage
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.warn(`Error setting localStorage key "${key}":`, error);
    }
  };

  return [value, setValue];
}