T
TanStack•16mo ago
sunny-green

How can I reformat this code to make it work better cause now its kind of terrible cause of debounce

https://pastebin.com/ebAzJ36E
Pastebin
import { createFileRoute, notFound, useNavigate } from "@tanstack/r...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
1 Reply
compatible-crimson
compatible-crimson•16mo ago
Increase debounce time to at least 1 second. Make your SearchInput a separate component, so it doesn't rerender during the search. Also make a separate PetList component and combine those 2 through parent like this 
function Parent() {
  const [search, setSearch] = useState("")
  const pets = usePets(search);

  return (
    <div>
      <Search search={search} onChange={setSearch}/>
      <PetList pets={pets.data}/>
    </div>
  )
} 
function Parent() {
  const [search, setSearch] = useState("")
  const pets = usePets(search);

  return (
    <div>
      <Search search={search} onChange={setSearch}/>
      <PetList pets={pets.data}/>
    </div>
  )
}
It's just a pseudo code to point you in the right direction, don't take it as is. You may also make smth like this 
...
<PetList search={search} />
...
...
<PetList search={search} />
...
And put all your pets' loading logic inside this component.

Did you find this page helpful?