fix: simplify search bar filter string handling and reduce # of state changes (#4716)

fix search bar filter handling

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import searchIcon from 'assets/svg/search.svg'
 import xIcon from 'assets/svg/x.svg'
 import useDebounce from 'hooks/useDebounce'
-import { useAtomValue, useUpdateAtom } from 'jotai/utils'
+import { useResetAtom, useUpdateAtom } from 'jotai/utils'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -59,18 +59,17 @@ const SearchInput = styled.input`
 `
 
 export default function SearchBar() {
-  const currentString = useAtomValue(filterStringAtom)
-  const [localFilterString, setLocalFilterString] = useState(currentString)
+  const [localFilterString, setLocalFilterString] = useState('')
   const setFilterString = useUpdateAtom(filterStringAtom)
+  const resetFilterString = useResetAtom(filterStringAtom)
   const debouncedLocalFilterString = useDebounce(localFilterString, 300)
 
-  useEffect(() => {
-    setLocalFilterString(currentString)
-  }, [currentString])
-
   useEffect(() => {
     setFilterString(debouncedLocalFilterString)
-  }, [debouncedLocalFilterString, setFilterString])
+    return () => {
+      resetFilterString()
+    }
+  }, [debouncedLocalFilterString, setFilterString, resetFilterString])
 
   return (
     <SearchBarContainer>

src/pages/Tokens/index.tsx

@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
 import { PageName } from 'analytics/constants'
 import { Trace } from 'analytics/Trace'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
-import { filterStringAtom } from 'components/Tokens/state'
 import FavoriteButton from 'components/Tokens/TokenTable/FavoriteButton'
 import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
 import SearchBar from 'components/Tokens/TokenTable/SearchBar'
@@ -11,9 +10,7 @@ import TokenTable, { LoadingTokenTable } from 'components/Tokens/TokenTable/Toke
 import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { isValidBackendChainName } from 'graphql/data/util'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
-import { useResetAtom } from 'jotai/utils'
-import { useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -70,12 +67,6 @@ const FiltersWrapper = styled.div`
 `
 
 const Tokens = () => {
-  const resetFilterString = useResetAtom(filterStringAtom)
-  const location = useLocation()
-  useEffect(() => {
-    resetFilterString()
-  }, [location, resetFilterString])
-
   const navigate = useNavigate()
   useOnGlobalChainSwitch((chain) => {
     if (isValidBackendChainName(chain)) navigate(`/tokens/${chain.toLowerCase()}`)