useQuery with useState
hey all!, my question is how to optimize the useQuery search because now whenever the input changes the state changes and the useQuery refires but that too much load on the server in my opinion. what is the best approach to this kind of situation ?
21 Replies
i know about useDebounce but i want to see if there's more opitions or ways to handle this problem!
debouncing is a good way to handle it
or you can just require the user to press enter or click a button to refire
i was thinking that way but we actually needs it when the user type something in the input
is there any other methods beside the debouncing?
for a text input, not really
you can write some custom / more detailed logic that fits your specific problem
for example if the input is already >= x characters, don't debounce the first new character after >= 1 second
but then you need to know usage patterns
just debouncing is usually fine
and immediately querying on enter
yeah i think that too
thank you for your time
I usually use both debouncing and len > x characters
theres so many variations on debouncing
wait longer for shorter strings etc
but imo just use a basic one with like 300-500ms until thats not good enough
You’d need useMutation here though
Not useQuery
why?
oh i see the snippet posted above isnt ideal
imo always leave it disabled
and just refetch when the debounce returns
what's wrong exactly?
useQuery is for static inputs, if you don’t do static inputs it messes with caching so I’d refer to mutations
Ofc you can do dynamic like dynamic URLs etc but shouldn’t be done on one page
Is how I understand it
everytime you change the params, it's a different querykey so i think it's fine?
i dont know that much about caching on the server side though tbh
you will get all the partial inputs that a request was made on cached in the RQ cache by default
but imo thats fine and you can always invalidate if you feel the need to
using useMutation for what should be a GET request feels like a hack and should be avoided if at all possible
even though it works
totally agree on this
once the query is enabled it will refetch whenever it feels like it
you can just leave it disabled permanently and use
refetch whenever you wantyeah i guess the idle way to handle when the debounce ends or when the user hit enter
the way you have it is fine, assuming you change the
search and filters to debounced values, more of a preference thing / which precise behaviour you wantlet me show you what i did
i prefer the always disabled pattern for searches
uhh
I would also stop using images to show code 👍