Subscribe to a query without useQuery
I have a list of 300+ items rendered on the page and want to avoid mounting useQuery for each item. However, each item is wrapped with React.memo and I need the component to update whenever one particular query's data is updated. is there a way to subscribe to one particular query's changes and update the component accordingly without performance issues? thanks!
9 Replies
continuing-cyan•2y ago
Why would useQuery have performance issues?
mere-tealOP•2y ago
@TkDodo 🔮 Our lighthouse / performance tab often shows scripting / performance issues when mounting 400+ query observers on a page with a list. my team has been relying on mounting a query on the top level of the app and then syncing the data to jotai instead. unfortunately, each list item uses a different query observer and we don't want to be syncing to jotai for all the observers used. we are still on v4, not sure if v5 made improvements regarding mounting a lot of observers!
mere-tealOP•2y ago
Is https://github.com/TanStack/query/discussions/3756 still a good source to follow? I think we were running into something like this
GitHub
useBaseQuery onSubscribe is slow when mounting lots of useQuery ins...
First off: we have a pretty intense React application. We use useMemo, useCallback and React.memo pretty intensely to reduce re-renders. And these have had huge wins from a performance perspective....
continuing-cyan•2y ago
I remember that one. We fixed the clearTimeout issue. We have a performance test repo here: https://github.com/phryneas/rtkq-performance-testbench/tree/main/src
GitHub
rtkq-performance-testbench/src at main · phryneas/rtkq-performance-...
Contribute to phryneas/rtkq-performance-testbench development by creating an account on GitHub.
continuing-cyan•2y ago
It compares rtkq, react-query and I think swr
There is an overhead with creating observers, but I wouldn't expect it to show with a couple of hundreds. Maybe I'm wrong though-can you create a codesandbox that shows this behavior?
mere-tealOP•2y ago
Let me try to create one to show it!Thanks!
Is there a way to reuse an existing observer if a observer with the same query key is already mounted?
continuing-cyan•2y ago
no, an observer is unique per component. You can only move the observer higher up the tree and then pass data down.
I can tell more once I see the reproduction. You can also do direct cache subscriptions, which likely don't have the overhead, but that's not what it was made for. A lot of features are tied to observers. For example, without an active observer, your query is eligible for garbage collection, even if you read data in your component tree somewhere else. without an observer, you won't get fetches or refetches triggered, staleTime calculations depends on observers etc ...
mere-tealOP•2y ago
Thanks! is there an example of direct cache subscription in the doc? It is also likely due to how heavy our list item is as well..
continuing-cyan•2y ago
QueryCache | TanStack Query Docs
The QueryCache is the storage mechanism for TanStack Query. It stores all the data, meta information and state of queries it contains.
Normally, you will not interact with the QueryCache directly and instead use the QueryClient for a specific cache.