useRefState.ts

useRefState.ts

import { useEffect, useState, useRef, useCallback } from 'react';

export default function useRefState<TValue>(initialState: TValue) {
  const [state, setInnerState] = useState(initialState);
  const ref = useRef(initialState);

  const setState = useCallback((value: TValue) => {
    setInnerState(value);
    ref.current = value;
  }, []);

  useEffect(() => {
    ref.current = state;
  }, [state]);

  return [state, setState, ref] as const;
}