Skip to content

Commit d251f04

Browse files
committed
feat: implement batch rendering
1 parent 00b9e96 commit d251f04

25 files changed

+218
-112
lines changed

docs/src/pages/docs/comparison.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,29 @@ Feature/Capability Key:
3333
| Scroll Recovery ||||
3434
| Cache Manipulation ||||
3535
| Outdated Query Dismissal ||||
36+
| Render Optimizations<sup>2</sup> || 🛑 | 🛑 |
3637
| Auto Garbage Collection || 🛑 | 🛑 |
3738
| Mutation Hooks || 🟡 ||
3839
| Prefetching APIs || 🔶 ||
3940
| Query Cancellation || 🛑 | 🛑 |
40-
| Partial Query Matching<sup>2</sup> || 🛑 | 🛑 |
41+
| Partial Query Matching<sup>3</sup> || 🛑 | 🛑 |
4142
| Stale While Revalidate ||| 🛑 |
4243
| Stale Time Configuration || 🛑 | 🛑 |
4344
| Window Focus Refetching ||| 🛑 |
4445
| Network Status Refetching ||||
45-
| Automatic Refetch after Mutation<sup>3</sup> | 🔶 | 🔶 ||
46+
| Automatic Refetch after Mutation<sup>4</sup> | 🔶 | 🔶 ||
4647
| Cache Dehydration/Rehydration || 🛑 ||
4748
| React Suspense (Experimental) ||| 🛑 |
4849

4950
### Notes
5051

5152
> **<sup>1</sup> Lagged / "Lazy" Queries** - React Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.
5253
53-
> **<sup>2</sup> Partial query matching** - Because React Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.
54+
> **<sup>2</sup> Render Optimizations** - React Query has excellent rendering performance. It will only re-render your components when a query is updated. For example because it has new data, or to indicate it is fetching. React Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the `data` or `error` properties, you can reduce the number of renders even more by setting `notifyOnStatusChange` to `false`.
5455
55-
> **<sup>3</sup> Automatic Refetch after Mutation** - For truly automatic refetching to happen after a mutation occurs, a schema is necessary (like the one graphQL provides) along with heuristics that help the library know how to identify individual entities and entities types in that schema.
56+
> **<sup>3</sup> Partial query matching** - Because React Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.
57+
58+
> **<sup>4</sup> Automatic Refetch after Mutation** - For truly automatic refetching to happen after a mutation occurs, a schema is necessary (like the one graphQL provides) along with heuristics that help the library know how to identify individual entities and entities types in that schema.
5659
5760
[swr]: https://github.com/vercel/swr
5861
[apollo]: https://github.com/apollographql/apollo-client

rollup.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import commonJS from 'rollup-plugin-commonjs'
77
import visualizer from 'rollup-plugin-visualizer'
88
import replace from '@rollup/plugin-replace'
99

10-
const external = ['react']
10+
const external = ['react', 'react-dom']
1111
const hydrationExternal = [...external, 'react-query']
1212

1313
const globals = {
1414
react: 'React',
15+
'react-dom': 'ReactDOM',
1516
}
1617
const hydrationGlobals = {
1718
...globals,

src/core/index.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
export { queryCache, queryCaches, makeQueryCache } from './queryCache'
22
export { setFocusHandler } from './setFocusHandler'
33
export { setOnlineHandler } from './setOnlineHandler'
4-
export { CancelledError, isCancelledError, isError, setConsole } from './utils'
4+
export {
5+
CancelledError,
6+
isCancelledError,
7+
isError,
8+
setConsole,
9+
setBatchedUpdates,
10+
} from './utils'
511

612
// Types
713
export * from './types'

src/core/notifyManager.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { getBatchedUpdates, scheduleMicrotask } from './utils'
2+
3+
// TYPES
4+
5+
type NotifyCallback = () => void
6+
7+
// CLASS
8+
9+
export class NotifyManager {
10+
private queue: NotifyCallback[]
11+
private transactions: number
12+
13+
constructor() {
14+
this.queue = []
15+
this.transactions = 0
16+
}
17+
18+
batch(callback: () => void): void {
19+
this.transactions++
20+
callback()
21+
this.transactions--
22+
if (!this.transactions) {
23+
this.flush()
24+
}
25+
}
26+
27+
schedule(notify: NotifyCallback): void {
28+
if (this.transactions) {
29+
this.queue.push(notify)
30+
} else {
31+
scheduleMicrotask(() => {
32+
notify()
33+
})
34+
}
35+
}
36+
37+
flush(): void {
38+
const queue = this.queue
39+
this.queue = []
40+
if (queue.length) {
41+
scheduleMicrotask(() => {
42+
const batchedUpdates = getBatchedUpdates()
43+
batchedUpdates(() => {
44+
queue.forEach(notify => {
45+
notify()
46+
})
47+
})
48+
})
49+
}
50+
}
51+
}
52+
53+
// SINGLETON
54+
55+
export const notifyManager = new NotifyManager()

src/core/query.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
} from './types'
2424
import type { QueryCache } from './queryCache'
2525
import { QueryObserver, UpdateListener } from './queryObserver'
26+
import { notifyManager } from './notifyManager'
2627

2728
// TYPES
2829

@@ -131,11 +132,13 @@ export class Query<TResult, TError> {
131132
private dispatch(action: Action<TResult, TError>): void {
132133
this.state = queryReducer(this.state, action)
133134

134-
this.observers.forEach(observer => {
135-
observer.onQueryUpdate(action)
136-
})
135+
notifyManager.batch(() => {
136+
this.observers.forEach(observer => {
137+
observer.onQueryUpdate(action)
138+
})
137139

138-
this.queryCache.notifyGlobalListeners(this)
140+
this.queryCache.notifyGlobalListeners(this)
141+
})
139142
}
140143

141144
private scheduleGc(): void {

src/core/queryCache.ts

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {
44
functionalUpdate,
55
getQueryArgs,
66
isDocumentVisible,
7-
isPlainObject,
87
isOnline,
8+
isPlainObject,
99
isServer,
1010
} from './utils'
1111
import { getResolvedQueryConfig } from './config'
@@ -19,6 +19,7 @@ import {
1919
TypedQueryFunctionArgs,
2020
ResolvedQueryConfig,
2121
} from './types'
22+
import { notifyManager } from './notifyManager'
2223

2324
// TYPES
2425

@@ -90,8 +91,12 @@ export class QueryCache {
9091
0
9192
)
9293

93-
this.globalListeners.forEach(listener => {
94-
listener(this, query)
94+
notifyManager.batch(() => {
95+
this.globalListeners.forEach(listener => {
96+
notifyManager.schedule(() => {
97+
listener(this, query)
98+
})
99+
})
95100
})
96101
}
97102

@@ -195,17 +200,18 @@ export class QueryCache {
195200
options || {}
196201

197202
try {
198-
await Promise.all(
199-
this.getQueries(predicate, options).map(query => {
200-
const enabled = query.isEnabled()
203+
const promises: Promise<unknown>[] = []
201204

205+
notifyManager.batch(() => {
206+
this.getQueries(predicate, options).forEach(query => {
207+
const enabled = query.isEnabled()
202208
if ((enabled && refetchActive) || (!enabled && refetchInactive)) {
203-
return query.fetch()
209+
promises.push(query.fetch())
204210
}
205-
206-
return undefined
207211
})
208-
)
212+
})
213+
214+
await Promise.all(promises)
209215
} catch (err) {
210216
if (throwOnError) {
211217
throw err
@@ -362,9 +368,11 @@ export function makeQueryCache(config?: QueryCacheConfig) {
362368

363369
export function onVisibilityOrOnlineChange(type: 'focus' | 'online') {
364370
if (isDocumentVisible() && isOnline()) {
365-
queryCaches.forEach(queryCache => {
366-
queryCache.getQueries().forEach(query => {
367-
query.onInteraction(type)
371+
notifyManager.batch(() => {
372+
queryCaches.forEach(queryCache => {
373+
queryCache.getQueries().forEach(query => {
374+
query.onInteraction(type)
375+
})
368376
})
369377
})
370378
}

src/core/queryObserver.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
isDocumentVisible,
55
isValidTimeout,
66
} from './utils'
7+
import { notifyManager } from './notifyManager'
78
import type { QueryResult, ResolvedQueryConfig } from './types'
89
import type { Query, Action, FetchMoreOptions, RefetchOptions } from './query'
910

@@ -139,7 +140,9 @@ export class QueryObserver<TResult, TError> {
139140
}
140141

141142
private notify(): void {
142-
this.listener?.(this.currentResult)
143+
notifyManager.schedule(() => {
144+
this.listener?.(this.currentResult)
145+
})
143146
}
144147

145148
private updateStaleTimeout(): void {

src/core/tests/queryCache.test.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
mockConsoleError,
66
mockNavigatorOnLine,
77
} from '../../react/tests/utils'
8-
import { makeQueryCache, queryCache as defaultQueryCache } from '..'
8+
import { makeQueryCache, queryCache as defaultQueryCache } from '../..'
99
import { isCancelledError, isError } from '../utils'
1010

1111
describe('queryCache', () => {
@@ -348,14 +348,15 @@ describe('queryCache', () => {
348348
expect(query.queryCache).toBe(queryCache)
349349
})
350350

351-
test('notifyGlobalListeners passes the same instance', () => {
351+
test('notifyGlobalListeners passes the same instance', async () => {
352352
const key = queryKey()
353353

354354
const queryCache = makeQueryCache()
355355
const subscriber = jest.fn()
356356
const unsubscribe = queryCache.subscribe(subscriber)
357357
const query = queryCache.buildQuery(key)
358358
query.setData('foo')
359+
await sleep(1)
359360
expect(subscriber).toHaveBeenCalledWith(queryCache, query)
360361

361362
unsubscribe()

src/core/tests/utils.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
deepIncludes,
55
isPlainObject,
66
} from '../utils'
7-
import { setConsole, queryCache } from '..'
7+
import { setConsole, queryCache } from '../..'
88
import { queryKey } from '../../react/tests/utils'
99

1010
describe('core/utils', () => {

src/core/utils.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,3 +249,34 @@ export function createSetHandler(fn: () => void) {
249249
removePreviousHandler = callback(fn)
250250
}
251251
}
252+
253+
/**
254+
* Schedules a microtask.
255+
* This can be useful to schedule state updates after rendering.
256+
*/
257+
export function scheduleMicrotask(callback: () => void): void {
258+
Promise.resolve()
259+
.then(callback)
260+
.catch(error =>
261+
setTimeout(() => {
262+
throw error
263+
})
264+
)
265+
}
266+
267+
type BatchUpdateFunction = (callback: () => void) => void
268+
269+
// Default to a dummy "batch" implementation that just runs the callback
270+
let batchedUpdates: BatchUpdateFunction = (callback: () => void) => {
271+
callback()
272+
}
273+
274+
// Allow injecting another batching function later
275+
export function setBatchedUpdates(fn: BatchUpdateFunction) {
276+
batchedUpdates = fn
277+
}
278+
279+
// Supply a getter just to skip dealing with ESM bindings
280+
export function getBatchedUpdates(): BatchUpdateFunction {
281+
return batchedUpdates
282+
}

0 commit comments

Comments
 (0)