How to use requestAnimationFrame with React

The requestAnimationFrame is a browser API that enables us to schedule the execution of a function prior to the next available screen repaint. It synchronizes with the browser’s rendering loop, typically running at 60 frames per second (FPS), to create smooth animations.

A similar method, cancelAnimationFrame, stops the execution of the function being called through the requestAnimationFrame method and hence stops animations.

Compared to using a setInterval or setTimeout, requestAnimationFrame is more efficient and provides better control over animations. The setInterval and setTimeout methods execute their respective callback functions after a fixed time period. This time period doesn’t match the browser repaint time when the browser updates the UI, frame by frame, on each visual update, such as a playing animation, incrementing counter. On the other hand, requestAnimationFrame instructs the browser to execute the callback on each screen repaint, hence eliminating any time delay in producing visual updates and resulting in less screen flicker and stuttering.

Syntax

const id=requestAnimationFrame(callback)

The requestAnimationFrame method takes a callback function as an argument and executes the callback on the next available frame. It returns a non-zero integer to uniquely identify the callback.

Code example

Here’s a working example in React that demonstrates the use of requestAnimationFrame to seamlessly rotate a component. Click the “Run” button to start the application, and then click the “Start” button to start the animation.

Code explanation

  • Line 6: We define the id state variable to keep track of each callback to requestAnimationFrame.

  • Line 7: We also define the angle state variable with the useState hook to update the rotation angle of the component.

  • Line 8: A state variable isStartClicked is initialized with a value of 0. We will use this variable to avoid starting a new animation when one animation is already playing.

  • Lines 12–14: The handleStart function is an event handler that starts the animation when the “Start” button is clicked. Before starting a new animation, we need to check if an animation is not already running. If isStartClicked is 0 , it means no animation is currently running, so a new animation is started by passing the animate callback function to requestAnimationFrame and storing the return value in the id state. After starting the animation, we also set isStartClicked to 1 to avoid running a new animation until the current animation is stopped.

  • Lines 20–21: The handleStop function is an event handler that stops the animation after the “Stop” button is clicked. This is achieved by calling the cancelAnimationFrame and passing the id of the respective animate callback function as an argument that stops its execution. After stopping the animation, we set isStartClicked back to 0 so that we can start a new animation by clicking the “Start” button.

  • Lines 24–25: Inside the animate function, we first update the angle of the component. Then, we call the requestAnimationFrame method, which executes the animate method in each frame. As a result, the rotation angle is updated in every frame.

  • Line 30: We update the CSS style of the component by passing angle as an argument to the rotate function of the transform CSS property.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved