Retain scroll on single cell data update

[carlos-lopez-SaRa]

Hi there, here's the situation I'm facing:

1. TanStack query brings some data, meaning data has a stable reference.
2. A Shadcn UI table with TanStack Table renders using that data.
3. Somewhere else in the app a queryClient.resetQueries({...}) causes a re-fetch.
4. The only part of the data that changed was a single cell.
5. The whole table is re-rendered as a result and that causes the scroll position to be lost, especially when the user configures the page size to be 20, 50 or 100.

So far I've been theorizing ways to fix this but not sure if any of these could help:

• Try a direct update to the TanStack Query cache data rather than re-fetching the whole data set so I can keep the same reference for the data array, most of the row objects and only change the object of the cell that received the update.
• Try an immutable approach to the data so the table doesn't re-render, something like Immer so the objects references in the data only change in the hierarchical line (only the objects that are parents or grandparents of the changed cell object).
• Find a way so the change detection is not based on references but instead it uses deep equality checks.

I'm going to try these approaches but still wanted to ask if someone has better approaches for this kind of issue.