Using requestAnimationFrame with React Hooks
Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.
TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID.
useRef is not only for DOM references
There are three ways to store variables within functional components:
We can define a simple const or let whose value will always be reinitialized with every component re-rendering.
We can use useState whose value persists across re-renderi...