Infinite request fetches when staleTime is 0

[blenderskool]

When useQuery is used with the same request in a parent component and its child component with the child component conditionally visible by the parent, there are infinite request fetches being made(as observed in the network panel of devtools). When I add a staleTime: ~100 to the options, it works as expected without causing multiple API requests.

I'm not sure if this is the intended behaviour and there is some gap in my understanding of how react-query works. Would be glad to get some pointers.

Codesandbox to replicate this: https://codesandbox.io/s/nice-davinci-kl0bz8?file=/src/App.tsx
Also, the above example is contrived to show the issue. I can solve the issue by writing the code differently but I feel it's important to understand what's happening here too.

Tested on react-query v3 and v4.

[TkDodo]

This behaviour is pretty easy to explain: It's because you listen to isFetching, which unmounts Child1. isFetching is also true for background refetches (basically, every time when a request is in-flight). So what happens is:

• App fetches data, data is there, Child is rendered
• Because of staleTime:0, the mounting of Child triggers a background refetch.
• This sets isFetching:true, which makes the parent unmount Child
• fetch completes, Child mounts and fetches again

rinse and repeat ad nauseam.

---

My guess is that you actually want to check for isLoading, not isFetching ? Working reproduction here: https://codesandbox.io/s/magical-mclean-o339fe?file=/src/App.tsx

[blenderskool]

Thanks @TkDodo for the clear explanation! I was able to figure out that it was something to do with mounting/unmounting causing background refetches, but missed the difference between isLoading and isFetching 🙂