From f45a0cbf16f4f8e307dca46ec2c7096ef2e2f86d Mon Sep 17 00:00:00 2001
From: Denis Bogdanenko <shiirochi@yandex.ru>
Date: Sat, 17 Feb 2024 23:32:28 +0300
Subject: [PATCH] ws-76(fix): fix double running of mounting useEffect

---
 src/hooks/useWavesurfer.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useWavesurfer.ts b/src/hooks/useWavesurfer.ts
index e905503..832cfa6 100644
--- a/src/hooks/useWavesurfer.ts
+++ b/src/hooks/useWavesurfer.ts
@@ -36,6 +36,7 @@ function createPluginsMap<GPlug extends GenericPlugin>(curr: PluginDictionary<GP
 
 export default function useWavesurfer<GPlug extends GenericPlugin>({ container, plugins = [], onMount, ...props }: UseWaveSurferParams<GPlug>) {
     const isInitilizing$ = useRef<boolean>(false);
+
     const [pluginsMap, setPluginsMap] = useState<PluginDictionary<GPlug>>({});
     // is used to keep track of initialized plugins
     const initialized$ = useRef<string[]>([]);
@@ -45,10 +46,14 @@ export default function useWavesurfer<GPlug extends GenericPlugin>({ container,
     useEffect(() => {
         if (!container) return;
 
-        if (isInitilizing$.current) return;
+        // keep track of container
+        const prevContainer = container;
 
+        // do not allot to create WaveSurfer instance twice
+        if (isInitilizing$.current) return;
         isInitilizing$.current = true;
 
+
         const _plugins = createPluginsMap(pluginsMap, plugins);
 
         initialized$.current = Object.keys(_plugins);
@@ -65,6 +70,9 @@ export default function useWavesurfer<GPlug extends GenericPlugin>({ container,
         setWavesurfer(ws);
 
         return () => {
+            // if container did not changed, but useEffect is still called,
+            // prevent destroy if container or all-others hook dependencies are not changed
+            if (prevContainer === container) return;
             ws.destroy();
         };
     }, [container]);