akinsho · June 13, 2017 12:51 · Mar 6, 2017 · Mar 6, 2017 · Mar 6, 2017 · Mar 6, 2017
diff --git a/requestAnimationFrame.js b/requestAnimationFrame.js
@@ -15,7 +15,7 @@ startLoop() {
 }
 
 loop() {
-  /* perform loop work here */
+  // perform loop work here
   this.theoreticalComponentAnimationFunction()
 
   // Set up next iteration of the loop

diff --git a/requestAnimationFrame.js b/requestAnimationFrame.js
@@ -16,6 +16,7 @@ startLoop() {
 
 loop() {
   /* perform loop work here */
+  this.theoreticalComponentAnimationFunction()
 
   // Set up next iteration of the loop
   this.frameId = window.requestAnimationFrame( this.loop )

diff --git a/requestAnimationFrame.js b/requestAnimationFrame.js
@@ -15,8 +15,9 @@ startLoop() {
 }
 
 loop() {
-  // perform loop work here
+  /* perform loop work here */
 
+  // Set up next iteration of the loop
   this.frameId = window.requestAnimationFrame( this.loop )
 }
 

diff --git a/requestAnimationFrame.js b/requestAnimationFrame.js
@@ -0,0 +1,27 @@
+// 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.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
+}