React Performance: requestAnimationFrame Example

requestAnimationFrame.js

// How to ensure that our animation loop ends on component unount

componentDidMount() {
  this.startLoop();
}

componentWillUnmount() {
  this.stopLoop();
}

startLoop() {
  if( !this._frameId ) {
    this._frameId = window.requestAnimationFrame( this.loop );
  }
}

loop() {
  // perform loop work here
  this.theoreticalComponentAnimationFunction()
  
  // 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
}

Thanks man!

Should be this._frameId on 22

componentDidMount() {
this.startLoop();
}

componentWillUnmount() {
this.stopLoop();
}

startLoop() {
if (!this._frameId) {
this._frameId = window.requestAnimationFrame(this.loop.bind(this));
}
}

loop() {
// perform loop work here
// Set up next iteration of the loop
this._frameId = window.requestAnimationFrame(this.loop.bind(this));
}

stopLoop() {
window.cancelAnimationFrame(this._frameId);
// Note: no need to worry if the loop has already been cancelled
// cancelAnimationFrame() won't throw an error
}