From b7d753d593acd66ad5ef9077cfb806537853c89e Mon Sep 17 00:00:00 2001
From: Eric Corson <public@giraffedev.com>
Date: Thu, 29 Feb 2024 10:40:38 +0900
Subject: [PATCH] feat: use effect skip first render

---
 apps/namada-interface/src/App/App.tsx          |  9 +++++----
 packages/hooks/src/index.ts                    |  3 ++-
 packages/hooks/src/useEffectSkipFirstRender.ts | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 packages/hooks/src/useEffectSkipFirstRender.ts

diff --git a/apps/namada-interface/src/App/App.tsx b/apps/namada-interface/src/App/App.tsx
index 1bd1860f1d..c9b21b651b 100644
--- 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
index 365ffb025c..8a1f36dcd6 100644
--- 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
new file mode 100644
index 0000000000..a33eeebbcd
--- /dev/null
+++ 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);
+};