fix: FuelProvider leaking render events (#316)

FuelLabs · Sep 30, 2024 · f1a0a23 · f1a0a23
1 parent 681785b
commit f1a0a23
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 57 deletions.
diff --git a/.changeset/brave-students-boil.md b/.changeset/brave-students-boil.md
@@ -0,0 +1,5 @@
+---
+"@fuels/react": patch
+---
+
+Fixed FuelProvider triggering unnecessary render events
diff --git a/examples/react-app/src/main.tsx b/examples/react-app/src/main.tsx
@@ -52,29 +52,25 @@ const wagmiConfig = createConfig({
     }),
   ],
 });
+const NETWORKS = [
+  {
+    chainId: CHAIN_IDS.fuel.testnet,
+  },
+];
+
+const FUEL_CONFIG = {
+  connectors: defaultConnectors({
+    devMode: true,
+    wcProjectId: WC_PROJECT_ID,
+    ethWagmiConfig: wagmiConfig,
+    chainId: CHAIN_IDS.fuel.testnet,
+  }),
+};
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <FuelProvider
-        theme="dark"
-        uiConfig={{
-          suggestBridge: true, // default true
-        }}
-        networks={[
-          {
-            chainId: CHAIN_IDS.fuel.testnet,
-          },
-        ]}
-        fuelConfig={{
-          connectors: defaultConnectors({
-            devMode: true,
-            wcProjectId: WC_PROJECT_ID,
-            ethWagmiConfig: wagmiConfig,
-            chainId: CHAIN_IDS.fuel.testnet,
-          }),
-        }}
-      >
+      <FuelProvider theme="dark" networks={NETWORKS} fuelConfig={FUEL_CONFIG}>
         <Toast.Provider>
           <App />
           <Toast.Viewport

diff --git a/packages/react/src/providers/FuelProvider.tsx b/packages/react/src/providers/FuelProvider.tsx
@@ -2,6 +2,7 @@ import type { FuelConfig } from 'fuels';
 
 import { Connect } from '../ui/Connect';
 
+import { useMemo } from 'react';
 import type { NetworkConfig, UIConfig } from '../types';
 import { BridgeDialog } from '../ui/Connect/components/Bridge/BridgeDialog';
 import { NetworkDialog } from '../ui/Connect/components/Network/NetworkDialog';
@@ -29,11 +30,15 @@ export function FuelProvider({
 }: FuelProviderProps) {
   const theme = _theme || 'light';
   const networksConfig = useNetworkConfigs(networks);
-  const uiConfig = Object.assign(
-    {
-      suggestBridge: true,
-    },
-    _uiConfig ?? {},
+  const uiConfig = useMemo(
+    () =>
+      Object.assign(
+        {
+          suggestBridge: true,
+        },
+        _uiConfig ?? {},
+      ),
+    [_uiConfig],
   );
 
   if (ui) {

diff --git a/packages/react/src/providers/FuelUIProvider.tsx b/packages/react/src/providers/FuelUIProvider.tsx
@@ -124,11 +124,11 @@ export function FuelUIProvider({
     }
   }, [connectors, connector]);
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     setError(null);
     setConnector(null);
     setDialogRoute(Routes.LIST);
-  };
+  }, []);
 
   const handleRetryConnect = useCallback(
     async (connector: FuelConnector) => {
@@ -203,38 +203,61 @@ export function FuelUIProvider({
     };
   }, []);
 
+  const contextValue = useMemo(
+    () => ({
+      // General
+      theme: theme || 'light',
+      fuelConfig,
+      uiConfig,
+      error,
+      setError,
+      // Connection
+      isConnected: !!isConnected,
+      isConnecting,
+      // UI States
+      isLoading,
+      isError,
+      connectors,
+      // Actions
+      connect: handleConnect,
+      cancel: handleCancel,
+      // Dialog only
+      dialog: {
+        route: dialogRoute,
+        setRoute,
+        connector,
+        isOpen,
+        connect: handleSelectConnector,
+        retryConnect: handleRetryConnect,
+        back: handleBack,
+        _startConnection: handleStartConnection,
+      },
+    }),
+    [
+      theme,
+      fuelConfig,
+      uiConfig,
+      error,
+      isConnected,
+      isConnecting,
+      isLoading,
+      isError,
+      connectors,
+      connector,
+      dialogRoute,
+      isOpen,
+      handleCancel,
+      handleStartConnection,
+      setRoute,
+      handleSelectConnector,
+      handleConnect,
+      handleRetryConnect,
+      handleBack,
+    ],
+  );
+
   return (
-    <FuelConnectContext.Provider
-      value={{
-        // General
-        theme: theme || 'light',
-        fuelConfig,
-        uiConfig,
-        error,
-        setError,
-        // Connection
-        isConnected: !!isConnected,
-        isConnecting,
-        // UI States
-        isLoading,
-        isError,
-        connectors,
-        // Actions
-        connect: handleConnect,
-        cancel: handleCancel,
-        // Dialog only
-        dialog: {
-          route: dialogRoute,
-          setRoute,
-          connector,
-          isOpen,
-          connect: handleSelectConnector,
-          retryConnect: handleRetryConnect,
-          back: handleBack,
-          _startConnection: handleStartConnection,
-        },
-      }}
-    >
+    <FuelConnectContext.Provider value={contextValue}>
       {children}
     </FuelConnectContext.Provider>
   );