Every state change causes refetch

[iamclaytonray]

I have a simple search screen. I type in an input (controlled via useState) and every onChange event triggers useQuery to refetch. I am feeling pretty stupid because I've tested this with Apollo, URQL, and React Query. I'm obviously missing something. How do I prevent this type of refetching?

[TkDodo]

How would you like it to behave please?

[TkDodo]

For clarity, every state change causes a refetch, even if it's not a dependency to useQuery

Not sure why you'd say that, because that's not what's happening in that sandbox. I can type in the input and see no fetches. The networktab shows no fetches, and the react-query devtools also show no fetches...

you have made a console.log of the data in the render function, and of course that executes, because you have a controlled input with useState and that makes the component re-render. But that doesn't trigger another fetch - you'll just get the result from the cache. It's even referentially stable, so, really not sure where you're going towards ...

Think about it like that: If react-query were to re-fetch on every re-render, it would result in an infinite loop, because every refetch triggers also a re-render, which would then trigger a re-fetch ...

[iamclaytonray]

How would I prevent it from rendering then?

[TkDodo]

It’s not useQuery that’s doing the re-rendering. You update the state, so the component re-renders, because the state changes.

[iamclaytonray]

I just did a bunch of testing and will give a repro later. Basically, I copied the same exact code (UI, etc) but used Axios in one test and RQ in another. While the rerender does happen, Axios is considerably more performant. I don't think I did a great job at explaining and the code sandbox didn't quite show what I was trying to depict so I'll give a more thorough example, side by side

[TkDodo]

Yes, that would be appreciated, thank you.