title: Access changed state variables from inside custom hook (ReactJS)
body: <p>I have a custom useAnimationFrame Hook:</p>
  <pre><code>import React, { useRef } from 'react';
  
  const useAnimationFrame = (callback: (arg0: number) =&gt; void) =&gt; {
    // Use useRef for mutable variables that we want to persist
    // without triggering a re-render on their change
    const requestRef = useRef&lt;number&gt;();
    const previousTimeRef = useRef&lt;number&gt;();
  
    const animate = (time: number) =&gt; {
      if (previousTimeRef.current) {
        const deltaTime = time - previousTimeRef.current;
        callback(deltaTime);
      }
      previousTimeRef.current = time;
      requestRef.current = requestAnimationFrame(animate);
    };
  
    React.useEffect(() =&gt; {
      requestRef.current = requestAnimationFrame(animate);
      return () =&gt; {
        if (requestRef.current) {
          cancelAnimationFrame(requestRef.current);
        }
      };
    }, []); // Make sure the effect runs only once
  };
  
  export default useAnimationFrame;
  </code></pre>
  <p>And I would like to use it this way, to update what is happening with each frame:</p>
  <pre><code>const exerciseRunning = useRef(true);
  const directionForward = useRef(true);
  
  const [progress, setProgress] = useState(0);
  
  const [coord1, setCoord1] = useState({x: 0, y: 0});
  const [coord2, setCoord2] = useState({x: 0, y: 0});
  
  const [percentage, setPercentage] = useState(1);
  
  useAnimationFrame((deltaTime) =&gt; {
      // Works!
      if (!exerciseRunning.current) {
        return;
      }
  
      // setProgress works!
      // directon.Forward works!
      // percentage does not work!
      setProgress((prevState) =&gt;
        directionForward.current
          ? prevState + percentage * 1
          : prevState - percentage * 2
      );
    });
  </code></pre>
  <p>The references <code>exerciseRunning</code> and <code>directionForward</code> both work properly and so does the <code>setProgress</code>.</p>
  <p>I know, that the <code>matching()</code> and <code>percentage</code> parts are set at the first render (for the inside of useAnimationFrame) and do not change afterward. How do I need to change the construct, so that I can use the updated state variables?</p>