Component unmount triggers fetch once

[szmarci]

Hi!

Help me understand this behavior:
(sandbox: https://codesandbox.io/s/agitated-galileo-4i7bu9?file=/src/App.js:557-632)

1. component mounts -> network request fires -> data received -> data immediately stale. so far so good.
2. I click toggle button to unmount component -> network request fires (why?) -> data received (goes into cache I presume, it is not rendered because component is unmounted)
3. I click toggle to mount component -> component mounts -> no network request -> data resolved from cache (why? it is a freshly mounted component, shouldn't it fetch at least in the background?)
4. I click toggle button to unmount component -> no network request (when I first unmounted, it fired a request)
5. From now on if I keep toggling, no more network requests are made, it just keeps switching between stale and inactive state.

If I add refetchOnWindowFocus: false to the useQuery, the behavior changes, so that on first unmount no network request is fired and on further mounting/unmounting it just keeps toggling between stale and inactive.

Why does refetchOnWindowFocus have an effect this? I never lose focus to the window.

What am I overlooking here?

Thanks for the help.

[TkDodo]

I click toggle button to unmount component -> network request fires (why?)

very likely because you are focused on the code window in codesandox or the browser devtools that you have opened to look at the network tab. By clicking on the button, you raise a windowFocus event, which triggers a fetch before the button click event fires.

Click anywhere in the white area before clicking the button to confirm it, but given that you've already mentioned refetchOnWindowFocus, this is likely the reason.

[szmarci]

Thanks, I didn't notice that!