From d3deacc8d95243e81bb2be9cc628dc12e9ea2cf4 Mon Sep 17 00:00:00 2001
From: tmair <thomas.mair86@gmail.com>
Date: Mon, 26 Sep 2022 17:56:48 +0200
Subject: [PATCH] Cancel scheduled animation frames when component unmounts

If the component has scheduled an animation frame and it is unmounted after scheduling such some callbacks may be called on the unmounted component.
---
 src/index.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/index.js b/src/index.js
index b70e29e..e79e518 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,8 +61,8 @@ export default class Headroom extends Component {
     // Class variables.
     this.currentScrollY = 0
     this.lastKnownScrollY = 0
-    this.scrollTicking = false
-    this.resizeTicking = false
+    this.scrollHandler = undefined
+    this.resizeHandler = undefined
     this.eventListenerOptions = false
     this.state = {
       state: 'unfixed',
@@ -179,6 +179,12 @@ export default class Headroom extends Component {
       this.handleScroll,
       this.eventListenerOptions
     )
+    if (this.scrollHandler) {
+      raf.cancel(this.scrollHandler)
+    }
+    if (this.resizeHandler) {
+      raf.cancel(this.resizeHandler)
+    }
   }
 
   setRef = ref => (this.inner = ref)
@@ -187,7 +193,7 @@ export default class Headroom extends Component {
     this.setState({
       height: this.inner ? this.inner.offsetHeight : '',
     })
-    this.resizeTicking = false
+    this.resizeHandler = undefined
   }
 
   getScrollY = () => {
@@ -256,16 +262,14 @@ export default class Headroom extends Component {
   }
 
   handleScroll = () => {
-    if (!this.scrollTicking) {
-      this.scrollTicking = true
-      raf(this.update)
+    if (!this.scrollHandler) {
+      this.scrollHandler = raf(this.update)
     }
   }
 
   handleResize = () => {
-    if (!this.resizeTicking) {
-      this.resizeTicking = true
-      raf(this.setHeightOffset)
+    if (!this.resizeHandler) {
+      this.resizeHandler = raf(this.setHeightOffset)
     }
   }
 
@@ -339,7 +343,7 @@ export default class Headroom extends Component {
     }
 
     this.lastKnownScrollY = this.currentScrollY
-    this.scrollTicking = false
+    this.scrollHandler = undefined
   }
 
   render() {