Can anyone explain why this query hit multiple times (and even infinite loop) instead of only once?

[devinekadeni]

So I've created this sandbox to get the exact situation I'm running into (using dummy scenario).
Sandbox URL: https://codesandbox.io/s/nifty-jennings-udsydp?file=/src/Parent.js

Basically I have 1 reusable useQuery named useTodo and I have this parent component (<Parent />) and child component (<Child />).
Each component will call useTodo.
Then I create 3 scenarios:

1. render the <Child /> as it is inside the <Parent />
2. render the <Child /> with toggle state controlled by button on <Parent />
3. render the <Child /> after parent's isFetching return false

The result was:

1. useTodo API only hit 1x
2. useTodo API hit 3x
3. useTodo API hit infinite loop

Would be appreciated if anyone can explain what is going on here, why point 2 & 3 didn't hit 1x too?

[juanvilladev]

Did you ever get any answer on this? I keep having infinite rendering issues with the exact same condition.

[TkDodo]

There have been other discussions about this, the reason is always the same thing:

1. parent fetches, then, after it has finished fetching, it will render child
2. child will trigger a background refetch because refetchOnMount defaults to true and staleTime defaults to zero.
3. that background refetch makes isFetching: true, which will trigger a re-render of the parent and unmount Child (in case of !isFetching && <Child />)
4. when the background refetches finishes, the parent will mount Child again, putting you right back at 2) and you'll go infinite.

---

you probably don't want to unmount Child whenever the query isFetching - maybe you meant to check for isLoading instead?
Also, you might want to set a higher staleTime to avoid having a background refetch on every mount.

[devinekadeni]

Ahh I see that's make sense, point 2 explains it the most.
In that case, adding refetchOnMount: false on Child's useQuery would also fix the problem, wouldn't it?
I've tried it and it also works properly.

Thanks a lot for the explanation.

[TkDodo]

What's the use-case for unmounting a component that uses a query when the same query is making a background refetch? Makes no sense to me...