Performance issue with large dataset

[boosja]

We recently discovered the app we maintain for our company has a performance issue. The crux of the matter is that we fetch a large dataset and reference it with useQuery many places in the application incl. at the top most level of the page. We update the data optimistically (offline support), hence the whole page gets rerendered on every small change.

I thought about splitting the dataset inside the queryFn and manually put them in separate caches with setQueryData, but then we would have to optimistically update the data multiple places. Not ideal.

We could do the same but in a useEffect. Then when the main cache is updated the data would automatically sync to the other caches.

Then I remembered that you can use the initialData option, but we wouldn't have a queryFn to set. Unless we wrapped getQueryData in a promise and split the dataset this way 🤔, but then how would we sync the data between the caches? Perhaps with invalidateQueries in a useEffect.

What seems the better option? Are there any better way to do this? Any help appreciated!

[TkDodo]

hence the whole page gets rerendered on every small change.

you probably want to use the select option to only subscribe your components to some parts of the Query:

https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#select

[boosja]

Hmm... I'm already doing that, but probably not as surgically.

It is the top level query that is the problem. I need it to validate the data, but maybe I could just use getQueryData instead.

Thanks, I'll add some more selects 😄