[FIX]: useQueries have quadratic performance in relation to the number of queries by joseph0926 · Pull Request #8641 · TanStack/query

joseph0926 · 2025-02-13T00:22:40Z

Tasks

Modification

We changed the code so that instead of recalculating the matching observers every time in the trackResult function, we compute the matches once and pass them in. In getOptimisticResult and notify, we now use the precomputed matches instead of calling findMatchingObservers again. This reduces redundant computations (avoiding O(N²) behavior) while keeping the overall functionality the same.

etc,,,

Before modification (500 queries -> Approximately 4500 calls)

After modification (500 queries -> Approximately 2000 calls)

Let us know if you have any issues.
We've tried to keep the original code as unaffected as possible.

Test

You can try running the test code below after switching findMatchingObservers to “public”.

import{QueriesObserver,QueryCache,QueryClient}from'@tanstack/query-core'import{waitFor}from'@testing-library/react'import{describe,expect,it}from'vitest'import{useQueries}from'../..'import{queryKey,renderWithClient,sleep}from'../utils'describe('useQueries O(N²) regression check',()=>{it('should not call #findMatchingObservers excessively with heavy load (500 queries)',async()=>{constqueryCache=newQueryCache()constqueryClient=newQueryClient({ queryCache })constoriginalFn=QueriesObserver.prototype.findMatchingObserversletcallCount=0QueriesObserver.prototype.findMatchingObservers=function(
...args: Array<any>){callCount++returnoriginalFn.apply(this,args)}console.log(QueriesObserver.prototype)functionPage(){constsize=500constkey=queryKey()constqueries=Array.from({length: size},(_,i)=>({queryKey: [key,i],queryFn: async()=>{awaitsleep(1+Math.random()*5)return`Result ${i}`},}))useQueries({ queries })return<div>Heavyqueriestest</div>}constrendered=renderWithClient(queryClient,<Page/>)awaitwaitFor(()=>rendered.getByText('Heavy queries test'))awaitsleep(1000)console.log('findMatchingObservers call count:',callCount)expect(callCount).toBeLessThan(500);(QueriesObserver.prototypeasany)['#findMatchingObservers']=originalFn})})

…r of queries

nx-cloud · 2025-02-16T12:28:38Z

View your CI Pipeline Execution ↗ for commit 4999cce.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	5m 15s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 58s	View ↗

☁️ Nx Cloud last updated this comment at 2025-02-16 12:34:49 UTC

pkg-pr-new · 2025-02-16T12:31:26Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8641

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@8641

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@8641

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@8641

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8641

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@8641

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@8641

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@8641

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@8641

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@8641

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@8641

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@8641

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@8641

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@8641

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@8641

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@8641

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@8641

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@8641

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@8641

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@8641

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@8641

commit: 4999cce

codecov · 2025-02-16T12:35:03Z

Codecov Report

Attention: Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 63.07%. Comparing base (5426e6c) to head (4999cce).
Report is 2 commits behind head on main.

Additional details and impacted files

@@ Coverage Diff @@## main #8641 +/- ##
===========================================
+ Coverage 46.24% 63.07% +16.83% 
===========================================
Files 199 135 -64 Lines 7532 4837 -2695 Branches 1722 1356 -366 ===========================================
- Hits 3483 3051 -432 + Misses 3670 1542 -2128 + Partials 379 244 -135

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`88.65% <ø> (ø)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`43.85% <ø> (ø)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`94.16% <80.00%> (+<0.01%)`	⬆️
@tanstack/query-devtools	`4.78% <ø> (ø)`
@tanstack/query-persist-client-core	`57.73% <ø> (ø)`
@tanstack/query-sync-storage-persister	`84.61% <ø> (ø)`
@tanstack/react-query	`95.95% <ø> (ø)`
@tanstack/react-query-devtools	`10.00% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`100.00% <ø> (ø)`
@tanstack/solid-query	`78.20% <ø> (ø)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`100.00% <ø> (ø)`
@tanstack/svelte-query	`87.33% <ø> (ø)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`100.00% <ø> (ø)`
@tanstack/vue-query	`71.01% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

[FIX]: useQueries have quadratic performance in relation to the numbe…
c9454b2
…r of queries

github-actionsBot added the package: query-core label Feb 13, 2025

Merge branch 'main' into fix/use-queries
4999cce

TkDodo merged commit 4ab455c into TanStack:mainFeb 16, 2025

joseph0926 mentioned this pull request Jul 20, 2025
perf(queriesObserver): fix O(n²) performance issue in batch updates #9467
Closed

Navigation Menu

Uh oh!

Uh oh!

[FIX]: useQueries have quadratic performance in relation to the number of queries - #8641

[FIX]: useQueries have quadratic performance in relation to the number of queries#8641
TkDodo merged 2 commits into
TanStack:mainfrom
joseph0926:fix/use-queries

joseph0926 commented Feb 13, 2025

Uh oh!

nx-cloudBot commented Feb 16, 2025•
edited
Loading

Uh oh!

pkg-pr-newBot commented Feb 16, 2025

Uh oh!

codecovBot commented Feb 16, 2025•
edited
Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

joseph0926 commented Feb 13, 2025

Tasks

Modification

etc,,,

Test

Uh oh!

nx-cloudBot commented Feb 16, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-newBot commented Feb 16, 2025

Uh oh!

codecovBot commented Feb 16, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nx-cloudBot commented Feb 16, 2025•
edited
Loading

codecovBot commented Feb 16, 2025•
edited
Loading