useStickyState.ts

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

interface StickyState<S> {
  key: string,
  defaultValue: S | (() => S),
}

export function useStickyState<S>({ defaultValue, key }: StickyState<S>): [S, Dispatch<SetStateAction<S>>] {
  const [value, setValue] = useState<S>(defaultValue);

  useEffect(() => {
    const stickyValue = window.localStorage.getItem(key);
    if (stickyValue !== null) {
      setValue(JSON.parse(stickyValue));
    }
  }, [key]);

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}