Fetch loop on repeated mounting and un-mounting

[john-pc]

I've noticed a strange behaviour on repeated mounting and un-mounting.
What happens is that i have tabs component that mounts a specific components on every tab change,
so every time i switch between tabs, the current tab component is mounted again.
I'm using useQuery on each components to fetch the relevant information for the current tab.
When i'm doing the following actions the useQuery getting into fetch loop that never ends.

1. mount the current tab component
2. useQuery fetches the data
3. move to other tab ( the previous component now unmounted and a new component tab mounted)
4. get back to the first tab component ( now after the cacheTimeout has been expired )
5. useQuery now getting into fetching loop with infinite fetch requests.

See the video below:
https://streamable.com/a90vs

Hope i'm clear enough, let me know if you need more information in order to reproduce it.

Thank you so much!

[tannerlinsley]

Interesting indeed. I wonder if we could get this to happen in a simple codesandbox that I can debug?

[john-pc]

Great idea - i will prepare one

[john-pc]

@tannerlinsley after many failed attempts to try and reproduce it in codesandbox , i've updated react and react-query package and the problem was gone..
it will remain a mystery ...