[WALL] Lubega / WALL-4120 / APIProvider memory leak console error

packages/api-v2/src/APIProvider.tsx

@@ -198,7 +198,11 @@ const APIProvider = ({ children }: PropsWithChildren<TAPIProviderProps>) => {
         if (reconnect) {
             connectionRef.current = initializeConnection(
                 () => {
-                    reconnectTimerId = setTimeout(() => setReconnect(true), 500);
+                    reconnectTimerId = setTimeout(() => {
+                        if (isMounted.current) {
+                            setReconnect(true);
+                        }
+                    }, 500);
                 },
                 () => {
                     if (!connectionRef.current) {

packages/api/src/hooks/useRemoteConfig.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ObjectUtils } from '@deriv-com/utils';
 import initData from '../remote_config.json';
 
@@ -17,22 +17,32 @@ const remoteConfigQuery = async function () {
 
 function useRemoteConfig(enabled = false) {
     const [data, setData] = useState(initData);
+    const isMounted = useRef(false);
 
     useEffect(() => {
-        enabled &&
+        isMounted.current = true;
+
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (enabled) {
             remoteConfigQuery()
                 .then(async res => {
                     const resHash = await ObjectUtils.hashObject(res);
                     const dataHash = await ObjectUtils.hashObject(data);
-                    if (resHash !== dataHash) {
+                    if (resHash !== dataHash && isMounted.current) {
                         setData(res);
                     }
                 })
                 .catch(error => {
                     // eslint-disable-next-line no-console
                     console.log('Remote Config error: ', error);
                 });
-    }, [enabled]);
+        }
+    }, [enabled, data]);
 
     return { data };
 }

packages/appstore/webpack.config.js

@@ -45,6 +45,7 @@ const default_plugins = [
     new Dotenv(),
     new DefinePlugin({
         'process.env.TRUSTPILOT_API_KEY': JSON.stringify(process.env.TRUSTPILOT_API_KEY),
+        'process.env.REMOTE_CONFIG_URL': JSON.stringify(process.env.REMOTE_CONFIG_URL),
     }),
     new IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
     new CircularDependencyPlugin({ exclude: /node_modules/, failOnError: true }),

packages/hooks/src/useGrowthbookGetFeatureValue.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Analytics } from '@deriv-com/analytics';
 import { getFeatureFlag } from '@deriv/utils';
+import { useIsMounted } from 'usehooks-ts';
 
 interface UseGrowthbookGetFeatureValueArgs<T> {
     featureFlag: string;
@@ -14,6 +15,7 @@ const useGrowthbookGetFeatureValue = <T extends string | boolean>({
     const resolvedDefaultValue: T = defaultValue !== undefined ? defaultValue : (false as T);
     const [featureFlagValue, setFeatureFlagValue] = useState<boolean>(false);
     const [isGBLoaded, setIsGBLoaded] = useState(false);
+    const isMounted = useIsMounted();
 
     // Required for debugging Growthbook, this will be removed after this is added in the Analytics directly.
     if (typeof window !== 'undefined') {
@@ -23,12 +25,14 @@ const useGrowthbookGetFeatureValue = <T extends string | boolean>({
     useEffect(() => {
         const fetchFeatureFlag = async () => {
             const is_enabled = await getFeatureFlag(featureFlag, resolvedDefaultValue);
-            setFeatureFlagValue(is_enabled);
-            setIsGBLoaded(true);
+            if (isMounted()) {
+                setFeatureFlagValue(is_enabled);
+                setIsGBLoaded(true);
+            }
         };
 
         fetchFeatureFlag();
-    }, []);
+    }, [featureFlag, resolvedDefaultValue, isMounted]);
 
     return [featureFlagValue, isGBLoaded];
 };

packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import useEmblaCarousel, { EmblaCarouselType } from 'embla-carousel-react';
-import { useHover } from 'usehooks-ts';
+import { useHover, useIsMounted } from 'usehooks-ts';
 import { useAllWalletAccounts, useAuthorize } from '@deriv/api-v2';
 import { LabelPairedChevronLeftLgFillIcon, LabelPairedChevronRightLgFillIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
@@ -26,16 +26,22 @@ const WalletsAddMoreCarousel: React.FC = () => {
     });
     const hoverRef = useRef<HTMLDivElement>(null);
     const isHover = useHover(hoverRef);
+    const isMounted = useIsMounted();
     const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
     const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
 
     const scrollPrev = useCallback(() => walletsAddMoreEmblaAPI?.scrollPrev(), [walletsAddMoreEmblaAPI]);
     const scrollNext = useCallback(() => walletsAddMoreEmblaAPI?.scrollNext(), [walletsAddMoreEmblaAPI]);
 
-    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
-        setPrevBtnEnabled(emblaApi.canScrollPrev());
-        setNextBtnEnabled(emblaApi.canScrollNext());
-    }, []);
+    const onSelect = useCallback(
+        (emblaApi: EmblaCarouselType) => {
+            if (isMounted()) {
+                setPrevBtnEnabled(emblaApi.canScrollPrev());
+                setNextBtnEnabled(emblaApi.canScrollNext());
+            }
+        },
+        [isMounted]
+    );
 
     useEffect(() => {
         if (!walletsAddMoreEmblaAPI) return;