usePersistentState.ts

import { Dispatch, SetStateAction, useState, useEffect } from 'react';

export function usePersistentState<T>(
  key: string,
  defaultValue: T
): [T, Dispatch<SetStateAction<T>>] {
  const [state, setState] = useState<T>(defaultValue);

  // Save to session storage on unload
  useEffect(() => {
    function handleBeforeUnload() {
      sessionStorage.setItem(key, JSON.stringify(state));
    }

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [key, state]);

  // Restore from session storage on mount
  useEffect(() => {
    const value = sessionStorage.getItem(key);
    if (value) {
      setState(JSON.parse(value));
      sessionStorage.removeItem(key);
    }
  }, [key]);

  return [state, setState];
}