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.

What is requestAnimationFrame?

The requestAnimationFrame() tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

Simply, it is used when we have to handle repeated animation changes consistently in JavaScript.

Benefits of using requestAnimationFrame

• The browser can further optimize resource consumption and make the animations smoother.
• It also allows the browser to block the animations to save battery when the page is not active or the system is underperforming.

Syntax: requestAnimationFrame(callback)

The method takes a callback as an argument and requestAnimationFrame() will run it when the screen is ready to accept the next screen repaint.

It returns a non-zero long integer value, the request ID, that uniquely identifies the entry in the callback list.

Canceling requestAnimationFrame

cancelAnimationFrame() is used to cancel the refresh callback request which accepts the request ID returned by the call to requestAnimationFrame().

Syntax: cancelAnimationFrame(requestID)

let requestID;
function animate() {

// doing some animation stuff
// get the requestID as part of calling animate()
requestId = requestAnimationFrame(animate);
}
animate();
function stopAnimation(e) {
//Use the requestID to cancel the requestAnimationFrame call
cancelAnimationFrame(requestId);
}

Here is a code for animation using requestAnimationFrame().

https://gist.github.com/savitapatel/6ef3cf1b1ec1f6259236465f903d5706

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.