Why useEffect triggers twice after the API response is cached?

[dev-rish]

Describe the Bug
After switching between 1 & 2 for couple of times (so that react query caches data for each of them), the useEffect still triggers twice.
The expected behavior is seen till v3.8.3 i.e. useEffect only triggers once. Once react query is updated to v3.9.0 every click on 1 or 2 causes useEffect to trigger twice.

Is there a way to prevent the second trigger?

I found related issues but still wanted some more info. if possible.

Minimal, reproducible example
https://codesandbox.io/s/optimistic-firefly-1tk7i5

Steps to reproduce
Click in 1 > Click on 2 > Click in 1 > Click on 2

Expected behavior
useEffect to trigger only once when id is switched.

How often does this bug happen?
Always

[samhirtarif]

Just a hunch - It seems like the cached object returned from the query is different, it has all the same data, but it seems to be a new object with a new reference which may be the cause of this. 🤷🏻‍♂️

[dev-rish]

That is the reason but I thought thats something react query takes care of as per Structural sharing

[TkDodo]

interesting. I think it might be a bug in select. If you remove select, it works as expected: https://codesandbox.io/s/staging-pond-j3k64v?file=/src/App.js

I also updated to v4, where this issue also persists: https://codesandbox.io/s/sad-scott-cidk6s?file=/src/App.js

[TkDodo]

I created an issue from the discussion: #5538