fix: cleaning exhaustive deps in hooks dom directory (#971)

* fix: cleaning exhaustive deps in hooks dom directory
bigcommerce · Mar 28, 2024 · 5988aff · 5988aff
1 parent 8d7527d
commit 5988aff
Show file tree

Hide file tree

Showing 9 changed files with 267 additions and 194 deletions.
diff --git a/apps/storefront/.eslintrc.json b/apps/storefront/.eslintrc.json
@@ -22,7 +22,9 @@
       }
     },
     {
-      "files": ["src/hooks/dom/*.ts", "src/hooks/*.ts"],
+      "files": [
+        "src/hooks/*.ts"
+      ],
       "rules": {
         "react-hooks/exhaustive-deps": 0
       }

diff --git a/apps/storefront/src/hooks/dom/useCartToQuote.ts b/apps/storefront/src/hooks/dom/useCartToQuote.ts
@@ -57,65 +57,66 @@ const useCartToQuote = ({
     'blockPendingAccountOrderCreation'
   )
 
-  const urlArr = ['/cart.php', '/checkout']
-
   const checkIsInPage = (url: string) => window.location.href.includes(url)
 
   const { pathname } = window.location
 
-  const showPendingAccountTip = () => {
-    const isShowBlockPendingAccountOrderCreationTip: IsShowBlockPendingAccountOrderCreationTipProps =
-      B3SStorage.get('isShowBlockPendingAccountOrderCreationTip') || {
-        cartTip: 0,
-        checkoutTip: 0,
-      }
+  useEffect(() => {
+    const urlArr = ['/cart.php', '/checkout']
 
-    if (!urlArr.includes(pathname)) return
+    const showPendingAccountTip = () => {
+      const isShowBlockPendingAccountOrderCreationTip: IsShowBlockPendingAccountOrderCreationTipProps =
+        B3SStorage.get('isShowBlockPendingAccountOrderCreationTip') || {
+          cartTip: 0,
+          checkoutTip: 0,
+        }
 
-    if (companyInfo.companyStatus === '') return
+      if (!urlArr.includes(pathname)) return
 
-    if (+companyInfo.companyStatus || !blockPendingAccountOrderCreation) return
+      if (companyInfo.companyStatus === '') return
 
-    if (
-      isShowBlockPendingAccountOrderCreationTip.cartTip &&
-      checkIsInPage(urlArr[0])
-    )
-      return
+      if (+companyInfo.companyStatus || !blockPendingAccountOrderCreation)
+        return
 
-    if (
-      isShowBlockPendingAccountOrderCreationTip.checkoutTip &&
-      checkIsInPage(urlArr[1])
-    )
-      return
-
-    if (checkIsInPage(urlArr[0])) {
-      globalSnackbar.warning(
-        'Your account is pending approval. Ordering will be enabled after account approval',
-        {
-          isClose: true,
-        }
+      if (
+        isShowBlockPendingAccountOrderCreationTip.cartTip &&
+        checkIsInPage(urlArr[0])
       )
-    }
+        return
 
-    if (checkIsInPage(urlArr[1])) {
-      globalSnackbar.error(
-        'Your account is pending approval. Ordering will be enabled after account approval'
+      if (
+        isShowBlockPendingAccountOrderCreationTip.checkoutTip &&
+        checkIsInPage(urlArr[1])
       )
-    }
+        return
+
+      if (checkIsInPage(urlArr[0])) {
+        globalSnackbar.warning(
+          'Your account is pending approval. Ordering will be enabled after account approval',
+          {
+            isClose: true,
+          }
+        )
+      }
+
+      if (checkIsInPage(urlArr[1])) {
+        globalSnackbar.error(
+          'Your account is pending approval. Ordering will be enabled after account approval'
+        )
+      }
 
-    B3SStorage.set('isShowBlockPendingAccountOrderCreationTip', {
-      cartTip:
-        +checkIsInPage(urlArr[0]) +
-        isShowBlockPendingAccountOrderCreationTip.cartTip,
-      checkoutTip:
-        +checkIsInPage(urlArr[1]) +
-        isShowBlockPendingAccountOrderCreationTip.checkoutTip,
-    })
-  }
+      B3SStorage.set('isShowBlockPendingAccountOrderCreationTip', {
+        cartTip:
+          +checkIsInPage(urlArr[0]) +
+          isShowBlockPendingAccountOrderCreationTip.cartTip,
+        checkoutTip:
+          +checkIsInPage(urlArr[1]) +
+          isShowBlockPendingAccountOrderCreationTip.checkoutTip,
+      })
+    }
 
-  useEffect(() => {
     showPendingAccountTip()
-  }, [pathname, blockPendingAccountOrderCreation])
+  }, [pathname, blockPendingAccountOrderCreation, companyInfo.companyStatus])
 
   const quoteCallBbck = useCallback(() => {
     const b3CartToQuote = document.querySelector('.b2b-cart-to-quote')
@@ -125,7 +126,7 @@ const useCartToQuote = ({
       addLoadding(b3CartToQuote)
       addToQuote()
     }
-  }, [])
+  }, [addLoadding, addToQuote])
 
   const {
     color = '',
@@ -215,7 +216,19 @@ const useCartToQuote = ({
         cartQuoteBtnDom.removeEventListener('click', quoteCallBbck)
       }
     }
-  }, [cartQuoteEnabled, addToAllQuoteBtn])
+  }, [
+    cartQuoteEnabled,
+    addToAllQuoteBtn,
+    cartToQuoteBtnLabel,
+    classSelector,
+    color,
+    customCss,
+    customTextColor,
+    enabled,
+    locationSelector,
+    mediaBlocks,
+    quoteCallBbck,
+  ])
 }
 
 export default useCartToQuote
diff --git a/apps/storefront/src/hooks/dom/useDomVariation.ts b/apps/storefront/src/hooks/dom/useDomVariation.ts
@@ -33,7 +33,7 @@ const useDomVariation = (dom: string, quoteCallBbck?: () => void) => {
         }
       })
     }
-  }, [])
+  }, [dom, quoteCallBbck])
 
   useMutationObservable(document.documentElement, cd)
 

diff --git a/apps/storefront/src/hooks/dom/useHideGoogleCustomerReviews.ts b/apps/storefront/src/hooks/dom/useHideGoogleCustomerReviews.ts
@@ -24,7 +24,7 @@ const useHideGoogleCustomerReviews = (
       const parentElement = dom?.parentElement
       if (parentElement) parentElement.style.display = newVisibilityStyle
     })
-  }, [isOpen])
+  }, [isOpen, isMobile])
 }
 
 export default useHideGoogleCustomerReviews
diff --git a/apps/storefront/src/hooks/dom/useMonitorBrowserBack.ts b/apps/storefront/src/hooks/dom/useMonitorBrowserBack.ts
@@ -25,6 +25,8 @@ const useMonitorBrowserBack = ({
       window.location.reload()
       B3SStorage.set('isEnterB2BBuyerPortal', false)
     }
+    // disabling to avoid unnecessary renders when adding the missing dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [history.href])
 }