Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
React Performance: requestAnimationFrame Example
// How to ensure that our animation loop ends on component unount
componentDidMount() {
componentWillUnmount() {
startLoop() {
if( !this._frameId ) {
this._frameId = window.requestAnimationFrame( this.loop );
loop() {
// perform loop work here
// Set up next iteration of the loop
this.frameId = window.requestAnimationFrame( this.loop )
stopLoop() {
window.cancelAnimationFrame( this._frameId );
// Note: no need to worry if the loop has already been cancelled
// cancelAnimationFrame() won't throw an error
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment