fix: correctly handle unmounted and remounted useCallInstance

Author: Regaddi

src/hooks/useCallInstance.ts

@@ -45,6 +45,30 @@ export const useCallInstance = (
       await co.destroy();
     }
 
+    /**
+     * Once instance is destroyed, nullify callInstance, so a new one can be created.
+     */
+    const handleDestroyedInstance = () => {
+      /**
+       * Setting a timeout makes sure the destruction and creation
+       * of call instances happen in separate call stacks.
+       * Otherwise there's a risk for duplicate call instances.
+       */
+      setTimeout(() => setCallInstance(null), 0);
+    };
+
+    let co = Daily.getCallInstance();
+
+    /**
+     * In case a call instance exists outside of this hook instance's knowledge,
+     * store it in state.
+     */
+    if (!callInstance && co && !co.isDestroyed()) {
+      co.once('call-instance-destroyed', handleDestroyedInstance);
+      setCallInstance(co);
+      return;
+    }
+
     /**
      * callInstance exists.
      */
@@ -61,7 +85,6 @@ export const useCallInstance = (
       return;
     }
 
-    let co = Daily.getCallInstance();
     if (!co || co.isDestroyed()) {
       /**
        * callInstance doesn't exist or is destroyed (TODO: Check why getCallInstance() can return a destroyed instance),
@@ -83,12 +106,7 @@ export const useCallInstance = (
 
     setCallInstance(co);
 
-    /**
-     * Once instance is destroyed, nullify callInstance, so a new one is created.
-     */
-    co.once('call-instance-destroyed', () => {
-      setCallInstance(null);
-    });
+    co.once('call-instance-destroyed', handleDestroyedInstance);
 
     /**
      * No cleanup phase here, because callObject.destroy() returns a Promise.