fix(Performance): stop raf loop before unmounting

alampros · alampros · commit fc2b48fec291 · 2019-04-03T19:13:24.000-04:00
fix #47
diff --git a/src/Confetti.ts b/src/Confetti.ts
@@ -121,6 +121,7 @@ export class Confetti {
   context: CanvasRenderingContext2D
   _options!: IConfettiOptions
   generator: ParticleGenerator
+  rafId?: number
 
   get options(): Partial<IConfettiOptions> {
     return this._options
@@ -162,11 +163,19 @@ export class Confetti {
       context.clearRect(0, 0, canvas.width, canvas.height)
     }
     if(this.generator.animate()) {
-      requestAnimationFrame(this.update)
+      this.rafId = requestAnimationFrame(this.update)
     } else {
       this._options.run = false
     }
   }
+
+  stop = () => {
+    this.options = { run: false }
+    if(this.rafId) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = undefined
+    }
+  }
 }
 
 export default Confetti
diff --git a/src/ReactConfetti.tsx b/src/ReactConfetti.tsx
@@ -24,6 +24,9 @@ export class ReactConfetti extends Component<Props> {
     }
   }
   componentWillUnmount() {
+    if(this.confetti) {
+      this.confetti.stop()
+    }
     this.confetti = undefined
   }
 

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,9 @@ export class ReactConfetti extends Component<Props> {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`componentWillUnmount() {`
	`27`	`+ if(this.confetti) {`
	`28`	`+ this.confetti.stop()`
	`29`	`+ }`
`27`	`30`	`this.confetti = undefined`
`28`	`31`	`}`
`29`	`32`