feat: use effect skip first render

anoma · Feb 29, 2024 · b7d753d · b7d753d
1 parent e74bf73
commit b7d753d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/apps/namada-interface/src/App/App.tsx b/apps/namada-interface/src/App/App.tsx
@@ -14,6 +14,7 @@ import {
   storeColorMode,
 } from "@namada/utils";
 
+import { useEffectSkipFirstRender } from "@namada/hooks";
 import {
   Namada,
   useIntegration,
@@ -67,7 +68,7 @@ const useOnChainChanged = (): void => {
   const refreshMinimumGasPrice = useSetAtom(minimumGasPriceAtom);
   const refreshPublicKeys = useSetAtom(isRevealPkNeededAtom);
 
-  useEffect(() => {
+  useEffectSkipFirstRender(() => {
     refreshMinimumGasPrice();
     refreshPublicKeys();
   }, [chain]);
@@ -79,7 +80,7 @@ const useOnNamadaExtensionAttached = (): void => {
   const { namada: attachStatus } = useUntilIntegrationAttached(chain);
   const integration = useIntegration("namada") as Namada;
 
-  useEffect(() => {
+  useEffectSkipFirstRender(() => {
     (async () => {
       if (attachStatus === "attached") {
         const connected = !!(await integration.isConnected());
@@ -95,7 +96,7 @@ const useOnNamadaExtensionConnected = (): void => {
   const refreshChain = useSetAtom(chainAtom);
   const refreshAccounts = useSetAtom(accountsAtom);
 
-  useEffect(() => {
+  useEffectSkipFirstRender(() => {
     if (connected) {
       refreshChain();
       refreshAccounts();
@@ -109,7 +110,7 @@ const useOnAccountsChanged = (): void => {
   const refreshBalances = useSetAtom(balancesAtom);
   const refreshPublicKeys = useSetAtom(isRevealPkNeededAtom);
 
-  useEffect(() => {
+  useEffectSkipFirstRender(() => {
     if (accountsLoadable.state === "hasData") {
       refreshBalances();
       refreshPublicKeys();

diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./useDebounce";
+export * from "./useEffectSkipFirstRender";
 export * from "./useEvent";
-export * from "./useSanitizedParams";
 export * from "./useSanitizedLocation";
+export * from "./useSanitizedParams";
 export * from "./useUntil";
diff --git a/packages/hooks/src/useEffectSkipFirstRender.ts b/packages/hooks/src/useEffectSkipFirstRender.ts
@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * The same as useEffect, but does not run the effect on the first render.
+ */
+export const useEffectSkipFirstRender: typeof useEffect = (effect, deps) => {
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+    } else {
+      effect();
+    }
+  }, deps);
+};