use-animation-frame

use-animation-frame

A hook to effortlessly run requestAnimationFrame() in React (demo):

import useAnimationFrame from 'use-animation-frame';

const Counter = () => {
  const [time, setTime] = useState(0);
  useAnimationFrame(e => setTime(e.time));
  return <div>Running for:<br/>{time.toFixed(1)}s</div>;
};

Inspired by CSS-Tricks' Using requestAnimationFrame with React Hooks and my twitter reply.

API

Accepts a function that will be called on each requestAnimationFrame step. If there's a re-render and a new function is created, it'll use that instead of the previous one:

useAnimationFrame(callback);

The callback receives a single parameter, which is an object with two properties (based on the performance.now() API):

• time: the absolute time since the hook was first mounted. This is useful for wall clock, general time, etc.
• delta: the time since the hook was run last. This is useful to measure e.g. FPS.

All times are in the International System of Units seconds, including decimals.

Example: FPS counter

With my other library use-interpolation it's easy to calculate the FPS (see in CodeSandbox):

import React, { useState } from "react";
import useInterpolation from 'use-interpolation';
import useAnimationFrame from 'use-animation-frame';

const Counter = () => {
  const [time, setTime] = useState(0);
  // 1s of interpolation time
  const [fps, setFps] = useInterpolation(1000);
  useAnimationFrame(e => {
    setFps(1 / e.delta);
    setTime(e.time);
  });
  return (
    <div>
      {time.toFixed(1)}s
      <br />
      {fps && Math.floor(fps.value)} FPS
    </div>
  );
};