useAnimationFrame

#API

• #

  useAnimationFrame() => UseAnimationFrameReturn

  Returns a controller object for requesting and cancelling an animation freame that is properly cleaned up once the component unmounts. New requests cancel and replace existing ones.

  const [style, setStyle] = useState({});
  const animationFrame = useAnimationFrame();
  const handleMouseMove = (e) => {
    animationFrame.request(() => {
      setStyle({ top: e.clientY, left: e.clientY })
    })
  }
  const handleMouseUp = () => {
    animationFrame.cancel()
  }
  return (
    <div onMouseUp={handleMouseUp} onMouseMove={handleMouseMove}>
      <Ball style={style} />
    </div>
  )

  Return Value UseAnimationFrameReturn