fix: React 17 issue with effect

amittkSharma · Jul 16, 2022 · 2834cbc · 2834cbc
1 parent 755cdb3
commit 2834cbc
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 11 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/example/bundle.js b/example/bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-video-player-extended",
-  "version": "7.0.10",
+  "version": "7.0.11",
   "description": "React HTML5 video providing functionality for marking and selecting frames, jumping back and forth between frames based on the fps.",
   "author": "Amitt K Sharma",
   "license": "MIT",

diff --git a/src/index.tsx b/src/index.tsx
@@ -216,19 +216,20 @@ function VideoPlayer(props: Props) {
   }
 
   useEffect(() => {
-    playerEl.current.addEventListener('timeupdate', handleProgress)
-    playerEl.current.addEventListener('durationchange', handleDurationLoaded)
+    const instance = playerEl.current
+    instance.addEventListener('timeupdate', handleProgress)
+    instance.addEventListener('durationchange', handleDurationLoaded)
     if (timeStart) {
       seekToPlayer()
     }
     if (isPlaying) {
-      playerEl.current.play()
+      instance.play()
     }
 
     return () => {
-      if (playerEl && playerEl.current) {
-        playerEl.current.removeEventListener('timeupdate', handleProgress)
-        playerEl.current.removeEventListener('durationchange', handleDurationLoaded)
+      if (instance) {
+        instance.removeEventListener('timeupdate', handleProgress)
+        instance.removeEventListener('durationchange', handleDurationLoaded)
       }
     }
   }, [])