replace uses of useEffect with useQuery

src/containers/Accounts/AMM/AMMAccounts/index.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useContext, useEffect } from 'react'
+import { FC, PropsWithChildren, useContext } from 'react'
 import { useQuery } from 'react-query'
 import { Helmet } from 'react-helmet-async'
 import { useLanguage } from '../../../shared/hooks'
@@ -105,25 +105,25 @@ export const AMMAccounts = () => {
       })
   })
 
-  useEffect(
-    () => () => {
-      window.scrollTo(0, 0)
+  useQuery(
+    ['track-screen-load', data],
+    () => {
+      if (!data) {
+        return null
+      }
+
+      trackScreenLoaded({
+        account_id: data.accountId,
+        asset1: `${hexToString(data.balance.currency)}.${data.balance.issuer}`,
+        asset2: `${hexToString(data.balance2.currency)}.${data.balance2.issuer}`,
+      })
+      return null
+    },
+    {
+      enabled: !!data,
     },
-    [],
   )
 
-  useEffect(() => {
-    if (!data) {
-      return
-    }
-
-    trackScreenLoaded({
-      account_id: data.accountId,
-      asset1: `${hexToString(data.balance.currency)}.${data.balance.issuer}`,
-      asset2: `${hexToString(data.balance2.currency)}.${data.balance2.issuer}`,
-    })
-  }, [data, trackScreenLoaded])
-
   const tabs = ['transactions']
 
   if (error) {

src/containers/Accounts/index.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { useQuery } from 'react-query'
 import { AccountHeader } from './AccountHeader'
 import { AccountTransactionTable } from './AccountTransactionTable'
 import './styles.scss'
@@ -16,13 +17,11 @@ export const Accounts = () => {
   const [currencySelected, setCurrencySelected] = useState('XRP')
   const mainPath = buildPath(ACCOUNT_ROUTE, { id: accountId })
 
-  useEffect(() => {
+  useQuery(['screen-load', tab], () => {
     trackScreenLoaded()
-
-    return () => {
-      window.scrollTo(0, 0)
-    }
-  }, [tab, trackScreenLoaded])
+    window.scrollTo(0, 0)
+    return null
+  })
 
   const tabs = ['transactions', 'assets']
 

src/containers/CustomNetworkHome/index.tsx

@@ -1,6 +1,7 @@
-import { KeyboardEvent, useEffect, useState } from 'react'
+import { KeyboardEvent, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import { useQuery } from 'react-query'
 import CustomNetworkLogo from '../shared/images/custom_network_logo.svg'
 import RightArrow from '../shared/images/side_arrow_green.svg'
 import { useAnalytics } from '../shared/analytics'
@@ -14,9 +15,10 @@ const SidechainHome = () => {
   const [networkText, setNetworkText] = useState('')
   const [customNetworks = []] = useCustomNetworks()
 
-  useEffect(() => {
+  useQuery(['screen-load'], () => {
     trackScreenLoaded()
-  }, [trackScreenLoaded])
+    return null
+  })
 
   function switchMode(desiredLink: string) {
     const customNetworkUrl = process.env.VITE_CUSTOMNETWORK_LINK

src/containers/Header/Search.tsx

@@ -1,10 +1,4 @@
-import {
-  FC,
-  KeyboardEventHandler,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
+import { FC, KeyboardEventHandler, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { XrplClient } from 'xrpl-client'
@@ -13,6 +7,7 @@ import {
   isValidXAddress,
   classicAddressToXAddress,
 } from 'ripple-address-codec'
+import { useQuery } from 'react-query'
 import CloseIcon from '../shared/images/close.png'
 
 import { useAnalytics } from '../shared/analytics'
@@ -177,8 +172,22 @@ export const Search = ({ callback = () => {} }: SearchProps) => {
   const { t } = useTranslation()
   const socket = useContext(SocketContext)
   const navigate = useNavigate()
-
   const [currentSearchInput, setCurrentSearchInput] = useState('')
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+
+  useQuery(
+    ['banner-timeout'],
+    () => {
+      const timeoutId = setTimeout(() => {
+        setIsBannerVisible(false)
+      }, 10000) // Disappear after 10 seconds
+
+      return () => clearTimeout(timeoutId)
+    },
+    {
+      enabled: isBannerVisible,
+    },
+  )
 
   const handleSearch = async (id: string) => {
     const strippedId = id.replace(/^["']|["']$/g, '')
@@ -199,16 +208,6 @@ export const Search = ({ callback = () => {} }: SearchProps) => {
     }
   }
 
-  const [isBannerVisible, setIsBannerVisible] = useState(true)
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setIsBannerVisible(false)
-    }, 10000) // Disappear after 10 seconds
-
-    return () => clearTimeout(timeoutId)
-  }, [])
-
   return (
     <>
       {process.env.VITE_ENVIRONMENT === 'mainnet' && isBannerVisible && (

src/containers/Ledger/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react'
+import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
@@ -83,9 +83,10 @@ export const Ledger = () => {
     )
   })
 
-  useEffect(() => {
+  useQuery(['screen-load'], () => {
     trackScreenLoaded()
-  }, [trackScreenLoaded])
+    return null
+  })
 
   const renderNav = (data: any) => {
     const { ledger_index: LedgerIndex, ledger_hash: LedgerHash } = data

src/containers/Ledgers/Legend.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useWindowSize } from 'usehooks-ts'
+import { useQuery } from 'react-query'
 import {
   TransactionAction,
   TransactionCategory,
@@ -19,11 +20,12 @@ export const Legend = () => {
   const [hidden, setHidden] = useState(previousInteraction)
 
   // Show legend by default when on desktop sizes
-  useEffect(() => {
+  useQuery(['legend-visibility', windowSize.width, previousInteraction], () => {
     if (previousInteraction === false) {
       setHidden(!(windowSize.width > 900))
     }
-  }, [previousInteraction, windowSize])
+    return null
+  })
 
   const actions = [
     TransactionAction.CREATE,

src/containers/Ledgers/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
@@ -30,12 +30,11 @@ export const LedgersPage = () => {
   const { t } = useTranslation()
   const network = useContext(NetworkContext)
 
-  useEffect(() => {
+  useQuery(['screen-load'], () => {
     trackScreenLoaded()
-    return () => {
-      window.scrollTo(0, 0)
-    }
-  }, [trackScreenLoaded])
+    window.scrollTo(0, 0)
+    return null
+  })
 
   const fetchValidators = () => {
     const url = `${process.env.VITE_DATA_URL}/validators/${network}`

src/containers/MPT/MPT.tsx

@@ -1,6 +1,7 @@
-import { FC, PropsWithChildren, useEffect, useState } from 'react'
+import { FC, PropsWithChildren, useState } from 'react'
 import { useParams } from 'react-router'
 import { Helmet } from 'react-helmet-async'
+import { useQuery } from 'react-query'
 import NoMatch from '../NoMatch'
 import { MPTHeader } from './MPTHeader/MPTHeader'
 import { useAnalytics } from '../shared/analytics'
@@ -41,14 +42,13 @@ export const MPT = () => {
   const { id: tokenId = '' } = useParams<{ id: string }>()
   const [error, setError] = useState<number | null>(null)
 
-  useEffect(() => {
+  useQuery(['screen-load', tokenId], () => {
     trackScreenLoaded({
       mpt_issuance_id: tokenId,
     })
-    return () => {
-      window.scrollTo(0, 0)
-    }
-  }, [tokenId, trackScreenLoaded])
+    window.scrollTo(0, 0)
+    return null
+  })
 
   const renderError = () => {
     const message = getErrorMessage(error)

src/containers/MPT/MPTHeader/MPTHeader.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext, useState } from 'react'
+import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
 import { Loader } from '../../shared/components/Loader'
@@ -40,11 +40,12 @@ export const MPTHeader = (props: Props) => {
     },
   )
 
-  useEffect(() => {
+  useQuery(['validate-token-id', tokenId], () => {
     if (!HASH192_REGEX.test(tokenId)) {
       setError(BAD_REQUEST)
     }
-  }, [setError, tokenId])
+    return null
+  })
 
   const showTooltip = (event: any, d: any) => {
     setTooltip({

src/containers/NFT/NFT.tsx

@@ -1,6 +1,7 @@
-import { FC, PropsWithChildren, useEffect, useState } from 'react'
+import { FC, PropsWithChildren, useState } from 'react'
 import { useParams } from 'react-router'
 import { Helmet } from 'react-helmet-async'
+import { useQuery } from 'react-query'
 import NoMatch from '../NoMatch'
 import { NFTHeader } from './NFTHeader/NFTHeader'
 import { NFTTabs } from './NFTTabs/NFTTabs'
@@ -43,15 +44,14 @@ export const NFT = () => {
   const { id: tokenId = '' } = useParams<{ id: string }>()
   const [error, setError] = useState<number | null>(null)
 
-  useEffect(() => {
+  useQuery(['screen-load', tokenId], () => {
     trackScreenLoaded({
       nftoken_id: tokenId,
       issuer: parseIssuerFromNFTokenID(tokenId),
     })
-    return () => {
-      window.scrollTo(0, 0)
-    }
-  }, [tokenId, trackScreenLoaded])
+    window.scrollTo(0, 0)
+    return null
+  })
 
   const renderError = () => {
     const message = getErrorMessage(error)

src/containers/NFT/NFTHeader/NFTHeader.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext, useState } from 'react'
+import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
 import { Loader } from '../../shared/components/Loader'
@@ -55,11 +55,12 @@ export const NFTHeader = (props: Props) => {
     },
   )
 
-  useEffect(() => {
+  useQuery(['validate-token-id', tokenId], () => {
     if (!HASH256_REGEX.test(tokenId)) {
       setError(BAD_REQUEST)
     }
-  }, [setError, tokenId])
+    return null
+  })
 
   // fetch the oldest NFT transaction to get its minted data
   const { data: firstTransaction } = useQuery(

src/containers/Network/Hexagons.jsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useWindowSize } from 'usehooks-ts'
+import { useQuery } from 'react-query'
 
 import { hexbin } from 'd3-hexbin'
 import { Loader } from '../shared/components/Loader'
@@ -60,13 +61,14 @@ export const Hexagons = ({ list, data }) => {
     ])
     .radius(radius)
 
-  useEffect(() => {
+  useQuery(['prepare-hexagons', data, list, width, gridHeight, radius], () => {
     if (width > 0) {
       setHexagons((prevHexagons) =>
         prepareHexagons(data, list, gridHeight, radius, prevHexagons),
       )
     }
-  }, [data, list, width, gridHeight, radius])
+    return null
+  })
 
   const renderHexagon = (d, theHex) => {
     const { cookie, pubkey, ledger_hash: ledgerHash } = d

src/containers/Network/index.tsx

@@ -1,6 +1,7 @@
-import { useContext, useEffect } from 'react'
+import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Helmet } from 'react-helmet-async'
+import { useQuery } from 'react-query'
 import { NETWORK_ROUTE } from '../App/routes'
 import { useAnalytics } from '../shared/analytics'
 import { useRouteParams } from '../shared/routing'
@@ -17,9 +18,10 @@ export const Network = () => {
   const { tab = 'nodes' } = useRouteParams(NETWORK_ROUTE)
   const network = useContext(NetworkContext)
 
-  useEffect(() => {
+  useQuery(['screen-load', tab], () => {
     trackScreenLoaded()
-  }, [tab, trackScreenLoaded])
+    return null
+  })
 
   if (network === null) {
     return (

src/containers/NoMatch/index.tsx

@@ -1,6 +1,7 @@
-import { useContext, useEffect } from 'react'
+import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from 'react-query'
 import { useAnalytics } from '../shared/analytics'
 import SocketContext from '../shared/SocketContext'
 import InfoIcon from '../shared/images/info.svg'
@@ -32,12 +33,13 @@ const NoMatch = ({
   const socket = useContext(SocketContext)
   const values = { connection: socket?.getState() }
 
-  useEffect(() => {
+  useQuery(['track-not-found', ...hints, title], () => {
     track('not_found', {
       description: `${title} -- ${hints.join(', ')}`,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps -- hints has to be spread to prevent this from running multiple times
-  }, [...hints, title, track])
+    return null
+  })
 
   const notFound = title.includes('not_found')
   const hintMsg = hints.map((hint) => (