useFrame hook - takes a function, and throttles it using requestAnimationFrame

use-frame.js

/* eslint-env browser */

import {useRef} from 'react';

export const useFrame = <T = any>(fn: (...args: T[]) => any) => {
  const frameRef = useRef();

  return (..._args: T[]) => {
    frameRef.current && cancelAnimationFrame(frameRef.current);
    frameRef.current = requestAnimationFrame(() => fn(..._args));
  };
};