perf(useQueries): optimize findMatchingObservers fn in queriesObserver for large datasets #5247
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This optimizes the
findMatchingObservers
function inqueriesObserver
which becomes very slow on large data sets inuseQueries
.Below are the results with latest react query without this change on a dataset of 5000 objects.
We can see it takes 1.3 seconds only inside the
findMatchingObservers
function, which leads to a very laggy UX.The majority of this time is spent inside 2 functions in
findMatchingObservers
..flatMap
is O(n*m) as it runs Array.find on every single element indefaultedQueryOptions
. By using a map we bring this down to O(m), where m is the number of elements indefaultedQueryOptions
. Yes using a map will add more space complexity but the overhead is extremely minimal compared to the performance gain.matchedQueryHashes
which uses Array.includes and is again a O(n*m) function which can be brought down to O(m) by using a Set.Measurements:
The following is setup with 5000 queries in
useQueries
with unique keys and everything matching documentation. When invalidating one query, the following happens:Before the fix, it takes 1.28 seconds only inside

findMatchingObservers
After the fix, it only takes 47ms! Nearly a 30x performance improvement for a dataset of 5000 objects.

If required & the very minimal changes are not justified, I can provide codesandbox for both comparisons.