useQuery behavior in v3 is fundamentally different from that in v2

[suhasv1995]

Describe the bug
I'm currently working on migrating from react-query v2 to v3. I noticed a fundamental difference in the behavior of react-query and it makes a huge difference. (especially in our test suite)

useQuery in react-query v3 undergoes one extra re-render when compared to v2. I have test cases below to prove it.

In the screenshot below, I'm simply testing out the useQuery hook and results after subsequent renders. (use both v2 and v3)
In case of v3, I must wait for two render cycles to get the results. (check the highlighted box) While in case of v2, I get the results after one render cycle.

Our tests at many places are banking on this behavior and because of an extra asynchronous cycles, the tests are breaking with act errors.

Am I doing something wrong? Is this behaviour intentional? Can something be done to modify this behavior?
As a user, I'd not prefer unnecessary re-renders. I feel that optimizing this behavior would the right thing to do.

To Reproduce
The following two repositories have tests included for v2 and v3 testing out useQuery.
https://github.com/suhasv1995/rq-v2-test
https://github.com/suhasv1995/rq-v3-test

Expected behavior
useQuery behavior in v3 should be similar to that in v2.

Screenshots

[TkDodo]

I'm not sure how waitForNextUpdate and rerender work exactly, but have a look at this simple example app, and look at the console logging: The component is definitely only rendered twice (once with undefined, and then once again when the data comes back):

https://codesandbox.io/s/zen-goldstine-n4sh4?file=/src/index.js

best opened in a separate window: https://n4sh4.csb.app/

according to the docs, rerender can be used to re-render a component with different props, so I'm not sure why you are calling rerender ? I think a test should usually be enough to:

• call the hook
• waitFor the result of the hook to be in the correct state (isSuccess)
• assert that you have data

this is what I am doing here: https://github.com/TkDodo/testing-react-query/blob/fd02fdfc4622ddcef5c3713ef9fc24d9df09298e/src/tests/hooks.test.tsx#L10-L16

I also have a blog post on testing: https://tkdodo.eu/blog/testing-react-query

[TkDodo]

let me move that to a discussion and we can re-open an issue once we've undoubtedly identified one.

[suv95]

@TkDodo Thanks for your reply.
I tried replicating the same behaviour on top of the example provided by you. The issue that I have observed, is not on the first render but on subsequent re-renders. For the same reason, I have added "Force Render" button.

Following are the links to codesandbox for v2 and v3.
https://codesandbox.io/s/rq-v2-test-tb2hm
https://codesandbox.io/s/rq-v3-test-umfej

"rendering Example" is logged twice on mount of the component - one for loading state and the other data fetch complete state.
However, on click of Force Render:

• on v2, "rendering Example" is logged two more times - again for loading and fetch complete states.
• on v3, "rendering Example" is logged three more times - for loading, unknown and fetch complete states.

This is the exact behaviour I was trying to demonstrate with tests previously. Please check it out. Thanks.

[TkDodo]

Thanks for the reproduction. I think the reasoning behind this change has been stated here: #2001 (comment)