perf(useQueries): optimize findMatchingObservers fn in queriesObserver for large datasets

[AEmad01]

This optimizes the findMatchingObservers function in queriesObserver which becomes very slow on large data sets in useQueries.

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.

• The first function .flatMap is O(n*m) as it runs Array.find on every single element in defaultedQueryOptions. By using a map we bring this down to O(m), where m is the number of elements in defaultedQueryOptions. Yes using a map will add more space complexity but the overhead is extremely minimal compared to the performance gain.
• The second function is where we check for 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)			Apr 10, 2023 3:10am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 52c8fa9:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 52c8fa9. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 4 targets

• nx affected --target=test:lib --parallel=5 --base=8969dc1649e4f7c49103032ef565b076f05a9ee6
• nx affected --target=test:eslint --parallel=5 --base=8969dc1649e4f7c49103032ef565b076f05a9ee6
• nx run-many --target=test:build --projects=root
• nx affected --target=test:types --parallel=5 --base=8969dc1649e4f7c49103032ef565b076f05a9ee6

---

Sent with 💌 from NxCloud.