Merge pull request #69 from LedgerHQ/fix/race-condition-in-hook

fix: cancel previous effect to avoid race condition

Author: gre-ledger

lib/src/hooks/useCryptoIcon.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getIconUrl } from '../iconMapping';
 
 interface UseCryptoIconProps {
@@ -19,30 +19,42 @@ export const useCryptoIcon = ({ ledgerId, network }: UseCryptoIconProps): UseCry
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const loadIcon = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    setNetworkUrl(null);
-
-    const iconsToResolve = [getIconUrl(ledgerId)];
-    if (network) iconsToResolve.push(getIconUrl(network));
-
-    try {
-      const [url, networkUrlResolved] = await Promise.all(iconsToResolve);
-      setIconUrl(url);
-      if (network && networkUrlResolved) setNetworkUrl(networkUrlResolved);
-    } catch (e) {
-      const errorInstance = e instanceof Error ? e : new Error('Failed to load icon');
-      setError(errorInstance);
-      console.error('Failed to load crypto icon:', errorInstance);
-    } finally {
-      setLoading(false);
-    }
-  }, [ledgerId, network]);
-
   useEffect(() => {
+    let cancelled = false;
+
+    const loadIcon = async () => {
+      setLoading(true);
+      setError(null);
+      setNetworkUrl(null);
+
+      const iconsToResolve = [getIconUrl(ledgerId)];
+      if (network) iconsToResolve.push(getIconUrl(network));
+
+      try {
+        const [url, networkUrlResolved] = await Promise.all(iconsToResolve);
+        if (cancelled) return;
+
+        setIconUrl(url);
+        if (network && networkUrlResolved) setNetworkUrl(networkUrlResolved);
+      } catch (e) {
+        if (cancelled) return;
+
+        const errorInstance = e instanceof Error ? e : new Error('Failed to load icon');
+        setError(errorInstance);
+        console.error('Failed to load crypto icon:', errorInstance);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
     loadIcon();
-  }, [loadIcon]);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [ledgerId, network]);
 
   return {
     iconUrl,