verify event listener removed in React (#40)

dkaoster · Mar 2, 2023 · e027213 · e027213
1 parent e2bebe9
commit e027213
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/ScrollyVideo.js b/src/ScrollyVideo.js
@@ -129,7 +129,7 @@ class ScrollyVideo {
     // Add our event listeners for handling changes to the window or scroll
     if (this.trackScroll) {
       // eslint-disable-next-line no-undef
-      window.addEventListener('scroll', () => this.updateScrollPercentage());
+      window.addEventListener('scroll', this.updateScrollPercentage);
 
       // Set the initial scroll percentage
       this.video.addEventListener(
@@ -370,6 +370,8 @@ class ScrollyVideo {
    * Call to destroy this ScrollyVideo object
    */
   destroy() {
+    if (this.debug) console.info('Destroying ScrollyVideo');
+
     // eslint-disable-next-line no-undef
     if (this.trackScroll) window.removeEventListener('scroll', this.updateScrollPercentage);
 

diff --git a/src/ScrollyVideo.jsx b/src/ScrollyVideo.jsx
@@ -6,8 +6,8 @@ function ScrollyVideoComponent(props) {
   // variable to hold the DOM element
   const containerElement = useRef(null);
 
-  // variable to hold the scrollyVideo object
-  const [scrollyVideo, setScrollyVideo] = useState(null);
+  // ref to hold the scrollyVideo object
+  const scrollyVideoRef = useRef(null);
 
   // Store the props so we know when things change
   const [lastPropsString, setLastPropsString] = useState('');
@@ -19,22 +19,22 @@ function ScrollyVideoComponent(props) {
 
       if (JSON.stringify(restProps) !== lastPropsString) {
         // if scrollyvideo already exists and any parameter is updated, destroy and recreate.
-        if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy();
-        setScrollyVideo(new ScrollyVideo({ scrollyVideoContainer: containerElement.current, ...props }));
+        if (scrollyVideoRef.current && scrollyVideoRef.current.destroy) scrollyVideoRef.current.destroy();
+        scrollyVideoRef.current = new ScrollyVideo({ scrollyVideoContainer: containerElement.current, ...props });
 
         // Save the new props
         setLastPropsString(JSON.stringify(restProps));
       }
 
       // If we need to update the target time percent
-      if (scrollyVideo && typeof videoPercentage === 'number' && videoPercentage >= 0 && videoPercentage <= 1) {
-        scrollyVideo.setTargetTimePercent(videoPercentage);
+      if (scrollyVideoRef.current && typeof videoPercentage === 'number' && videoPercentage >= 0 && videoPercentage <= 1) {
+        scrollyVideoRef.current.setTargetTimePercent(videoPercentage);
       }
     }
 
     // Cleanup the component on unmount
     return () => {
-      if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy();
+      if (scrollyVideoRef.current && scrollyVideoRef.current.destroy) scrollyVideoRef.current.destroy();
     }
   }, [containerElement, props]);