Unnecessary rendering on data re-fetching

[martinbavio]

Describe the bug
I was using why-did-you-render in local and noticed a bunch of unnecessary re-renders happening because of something related to react-query that goes beyond my power as a lib consumer.

To Reproduce

1. Go to https://next-auth-1b8mmpq6w.vercel.app/
2. Check console.
3. Switch tab back and forth to regain window focus.
4. Check console again to see unnecessary re-renders happening.

Expected behavior
It should not re-render if data is the same.

Additional context

• It's a Next.js based demo, here's the codebase.
• If you go to https://next-auth-1b8mmpq6w.vercel.app/swr you are going to see the same thing but handled by SWR. There are not re-renders on stale re-fetching that returns the same data.

[tannerlinsley]

This seems relatively new. @boschni, @Ephem any ideas here?

[vincentjames501]

I just ran into the same thing on a React Native app that is causing our iOS refresh control to "flicker" when we call refetch. I think the bug may have been introduced in 2.7.x as upgrading from 2.6.0->2.7.0 the issue appears and before 2.7.0 the issue wasn't present.

[boschni]

I’m not able to test this specific issue right now, but when refetching, the isFetching and updatedAt properties change. This will trigger at least two renders. I created a flag in #840 which will allow you to prevent these additional renders.

[ankursehdev]

I am facing a similar issue too, I have few components on a page - Select Dropdown being one. If I click that dropdown the query is trying to fetch the data again. I don't know why.

Even on this demo, if you click somewhere post request is firing, is it the right behaviors? Check the GIF below.

I wonder, is it because I am losing focus on the tab and regaining it once I click back? I am new to react-query actually.

[boschni]

Hi @ankursehdev! Yes in both cases the additional renders are because the query is being revalidated on window focus. You can either disable this behaviour with refetchOnWindowFocus or wait for #840 to be merged which will allow you to keep the revalidation, but prevent additional renders.