Use Framesync via a render loop

useAnimationLoop.js

import sync, { cancelSync } from "framesync";
import { useEffect } from "react";

/**
  The code inside useAnimationLoop is guaranteed to run once a frame
  before Framer Motion/Popmotion/Pose renders

  useAnimationLoop(({ delta, timestamp }) => {
     // do stuff
  })
**/
export const useAnimationLoop = callback => {
  useEffect(() => {
    sync.update(callback, true);
    return () => cancelSync.update(callback);
  }, [callback]);
};