@cp949/mui/src/hooks/useRafState.ts

CP949 MUI React component library

import type { Dispatch, SetStateAction } from 'react';
import { useCallback, useRef, useState } from 'react';
import { useUnmount } from './useUnmount.js';

export const useRafState = <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] => {
  const frame = useRef(0);
  const [state, setState] = useState(initialState);

  const setRafState = useCallback((value: S | ((prevState: S) => S)) => {
    cancelAnimationFrame(frame.current);

    frame.current = requestAnimationFrame(() => {
      setState(value);
    });
  }, []);

  useUnmount(() => {
    cancelAnimationFrame(frame.current);
  });

  return [state, setRafState];
};