Unexpected re-renders, notifyOnChangeProps question

[sanvyx]

Describe the bug

Hi, i have a question about notifyOnChangeProps. Docs says that the default behavior is tracked, but I see some unexpected re-renders and I'm trying to understand why they are happening.

Please take a look at this example:
https://codesandbox.io/s/quizzical-montalcini-jm2dyf?file=/src/index.js

I expect to see 2 renders: first when data is undefined and second when the data comes from the queryFn. Somehow i see 3 renders and i can't understand why.

Your minimal, reproducible example

https://codesandbox.io/s/quizzical-montalcini-jm2dyf?file=/src/index.js

Steps to reproduce

Go to the minimal reproducible example, refresh the page and check console logs.

Expected behavior

I expect to see 2 renders: first when data is undefined and second when the data comes from the queryFn. Somehow i see 3 renders and i can't understand why.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• macOS Ventura
• Chrome Version 107.0.5304.110 (Official Build) (x86_64)

Tanstack Query version

^4.16.1

TypeScript version

^4.6.4

Additional context

No response

[TkDodo]

I added a log statement in the queryObserver, when renders are initiated by react-query, and it shows the following output:

render items:  undefined
queryFn
notify listeners QueryObserver
render items:  [{…}]
queryFn
render items:  [{…}]

as we can see, there is only one observer-triggered re-render happening - when data goes from undefined to an array.

also, if we move the logging to a useEffect, we can see:

queryFn
render items:  undefined
queryFn
render items:  [{…}]
render items:  [{…}]

so it really doesn't seem like the last render with items is triggered by the queryFn being run again.

interesting observation: I downgraded react to v17, and there, the log output is:

render items:  undefined
queryFn
render items:  [{…}]
queryFn

I think this might be related to:

• too many re-renders when changing keys #3772

and all the upstream issues about react18 and batching with useSyncExternalStore that are linked there. I think the react team has already agreed that this needs addressing on their end. I don't see much we can do here for now.

[TkDodo]

I'll close this as a duplicate of #3772, we can track progress there.