Using requestAnimationFrame in ReactJS

“Hello, do you want to update your UI in every iteration without flickering it?”

“Have you heard about this method requestAnimationFrame() before?”

“No worries !! Let’s catch up…”

Why do we need requestAnimationFrame?

Animations are key to developing interactive and engaging web applications. we relied on setTimeout() calling recursively or setInterval() repeatedly executing some code to make changes to an element frame by frame.

setInterval(() => {

     playAnimation() // doing some animation stuff

}, 10);

• The problem with this approach is that even though we specify this precision accurately, the interval between animations is inconsistent.


• Using setTimeout() or setInterval() to continuously make changes to the user's screen often induces "layout thrashing". The browser is forced to perform unnecessary reflows of the page before the user’s screen is physically able to display the changes.

TADAAA……….. Here, requestAnimationFrame comes in.

Let’s see another use case:

Consider, If you want some DOM updates like to get new element positions, focus elements,...etc or you want to wait as little time as possible, at that time you can use requestAnimationFrame().

Here is an example of the same.

Let’s say, you have to add multiple input fields and you’ve to focus on newly added input.

Typical code for a given example

The above solution approach will not work as the browser is busy updating data. Here, you’re trying to focus on the input field when the browser is not ready to repaint the screen.

Well, you can do it by setting the useEffect()dependency of data but this will cause inconsistency in focusing on the input field while deleting the input field.

So, What’s the solution ?? 🤔

“No worries !! We have a master solution requestAnimationFrame()”

with requestAnimationFrame

The above solution approach will work smoothly as requestAnimationFrame() allows you to execute code on the next available screen repaint i.e. frame by frame, with each frame being called only when the browser is ready for it.

You can find the complete code of an example Here.

Example of requestAnimationFrame

That’s all !!!!! Don’t you find requestAnimationFrame() much more polite to the browser ?? Comment your answer below in the comment section.👇

Thanks for reading! 😇

Hi, I am Savita Patel, a ReactJs developer 👩‍💻. If you have any questions regarding this article then leave a comment, will get back to you.