Subscribe to a query without useQuery | TanStack | Page 1

rigid cloak Dec 29, 2023, 3:30 AM

#

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!

glossy hamlet Dec 29, 2023, 9:22 AM

#

Why would useQuery have performance issues?

rigid cloak Dec 30, 2023, 3:44 AM

#

@glossy hamlet 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!

#

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....

glossy hamlet Dec 30, 2023, 8:58 AM

#

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.

#

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?

rigid cloak Dec 30, 2023, 9:49 AM

#

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?

glossy hamlet Dec 30, 2023, 10:52 AM

#

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 ...

rigid cloak Dec 30, 2023, 10:35 PM

#

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..

#Subscribe to a query without useQuery