Unexpected re-rendering components when update state

[hiep294]

Describe the bug

When removing or adding an item of list, by queryClient.setQueryData, then some other items' components are also re-rendered. I make sure that components are wrapped with React.memo. If remove the 1st item, then 2nd,3rd,... will be re-rendered. If remove the 3rd item, then 4th,5th will be re-rendered

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/memo-testing-react-query-kclcgq

Steps to reproduce

1. Open Browser Dev Tool
2. Delete 1st post
3. Look at that other post components are re-rendered, and show the message in the Browser Dev Tool

Expected behavior

As a user, I expect when changing (delete, add,...) an item in list with queryClient.setQueryData, other items' components will not be re-rendered

Screenshots or Videos

Tanstack Query adapter

react-query

TanStack Query version

5.51.21

TypeScript version

5.5.4

[TkDodo]

interesting. seems to be related to replies (removing the prop makes the re-renders go away) and structuralSharing. Setting that to false also makes them go away.

I think what happens is that with structuralSharing, we try to keep as many references from previously cached values as possible. So when you delete element 3, element 4 moves into the position of element 3. Then, we try to re-use that object in that position, but because it contains new data, it has to become a new object. Since you destruct name and id, those are primitives so it doesn't matter, but when it comes to replies, it's a new array instance (because again, values have changed inside for that position).

We cannot "take over" the element from the next position because we don't know how they relate. You won't see the problem with react state and lists, because react keeps track of elements with a special key, and when it sees the same key, it re-uses the element with that key. But we don't have that information, so there isn't anything we can do here.

You can:

• turn off the optimization and let react handle it in this case (this will work)
• instead of passing values as props, you re-subscribe with useQuery and select inside the Post component. Here's a fork of your sandbox that does this: https://codesandbox.io/p/sandbox/memo-testing-react-query-forked-p523ck?file=%2Fsrc%2FApp.tsx%3A99%2C35. It will stop the re-rendering, but creating additional observers also has a bit of a cost.

[hiep294]

Thank you for the work around idea, can you check the permission access of your codesanbox link ?

[TkDodo]

sorry about that. updated it 👍