fix(Visibility): cancel RAF on component unmount (Semantic-Org#2635)

Brantron · Mar 14, 2018 · 6b20157 · 6b20157
1 parent 3d26c86
commit 6b20157
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
@@ -214,6 +214,7 @@ export default class Visibility extends Component {
     const { context } = this.props
 
     this.unattachHandlers(context)
+    if (this.frameId) cancelAnimationFrame(this.frameId)
   }
 
   attachHandlers(context) {
@@ -284,7 +285,7 @@ export default class Visibility extends Component {
     if (this.ticking) return
 
     this.ticking = true
-    requestAnimationFrame(this.update)
+    this.frameId = requestAnimationFrame(this.update)
   }
 
   update = () => {

diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -105,7 +105,10 @@ describe('Visibility', () => {
 
   before(() => {
     requestAnimationFrame = window.requestAnimationFrame
-    window.requestAnimationFrame = fn => fn()
+    window.requestAnimationFrame = (fn) => {
+      fn()
+      return true
+    }
   })
 
   after(() => {
@@ -334,6 +337,18 @@ describe('Visibility', () => {
     })
   })
 
+  describe('componentWillUnmount', () => {
+    it('will cancel requestAnimationFrame', () => {
+      const cancelAnimationFrame = sandbox.spy(window, 'cancelAnimationFrame')
+      wrapperMount(<Visibility />)
+
+      mockScroll(0, 0)
+      wrapper.unmount()
+
+      cancelAnimationFrame.should.have.been.calledOnce()
+    })
+  })
+
   describe('fireOnMount', () => {
     it('fires callbacks after mount', () => {
       const onUpdate = sandbox.spy()