From c476d10ef298db9ed8cb5c8601a0fb95558282db Mon Sep 17 00:00:00 2001
From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com>
Date: Thu, 20 Jun 2024 18:56:00 +0800
Subject: [PATCH] fix: api provider unmounted component console error (#15576)

---
 packages/api-v2/src/APIProvider.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/api-v2/src/APIProvider.tsx b/packages/api-v2/src/APIProvider.tsx
index de4d473829a4..b9af791e8895 100644
--- a/packages/api-v2/src/APIProvider.tsx
+++ b/packages/api-v2/src/APIProvider.tsx
@@ -83,12 +83,20 @@ const APIProvider = ({ children }: PropsWithChildren<TAPIProviderProps>) => {
     const derivAPIRef = useRef<DerivAPIBasic>();
     const subscriptionsRef = useRef<Record<string, DerivAPIBasic['subscribe']>>();
     const reactQueryRef = useRef<QueryClient>();
+    const isMounted = useRef(true);
 
     // on reconnected ref
     const onReconnectedRef = useRef<() => void>();
     const onConnectedRef = useRef<() => void>();
     const isOpenRef = useRef<boolean>(false);
 
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
     if (!reactQueryRef.current) {
         reactQueryRef.current = new QueryClient({
             defaultOptions: {
@@ -103,12 +111,16 @@ const APIProvider = ({ children }: PropsWithChildren<TAPIProviderProps>) => {
     // have to be here and not inside useEffect as there are places in code expecting this to be available
     if (!derivAPIRef.current) {
         derivAPIRef.current = initializeDerivAPI(
-            () => setReconnect(true),
             () => {
-                isOpenRef.current = true;
-                if (onConnectedRef.current) {
-                    onConnectedRef.current();
-                    onConnectedRef.current = undefined;
+                if (isMounted.current) setReconnect(true);
+            },
+            () => {
+                if (isMounted.current) {
+                    isOpenRef.current = true;
+                    if (onConnectedRef.current) {
+                        onConnectedRef.current();
+                        onConnectedRef.current = undefined;
+                    }
                 }
             }
         );