feat: implement batch rendering

Author: boschni

rollup.config.js

@@ -7,11 +7,12 @@ import commonJS from 'rollup-plugin-commonjs'
 import visualizer from 'rollup-plugin-visualizer'
 import replace from '@rollup/plugin-replace'
 
-const external = ['react']
+const external = ['react', 'react-dom']
 const hydrationExternal = [...external, 'react-query']
 
 const globals = {
   react: 'React',
+  'react-dom': 'ReactDOM',
 }
 const hydrationGlobals = {
   ...globals,

src/core/index.ts

@@ -1,7 +1,13 @@
 export { queryCache, queryCaches, makeQueryCache } from './queryCache'
 export { setFocusHandler } from './setFocusHandler'
 export { setOnlineHandler } from './setOnlineHandler'
-export { CancelledError, isCancelledError, isError, setConsole } from './utils'
+export {
+  CancelledError,
+  isCancelledError,
+  isError,
+  setConsole,
+  setBatchedUpdates,
+} from './utils'
 
 // Types
 export * from './types'

src/core/query.ts

@@ -131,11 +131,13 @@ export class Query<TResult, TError> {
   private dispatch(action: Action<TResult, TError>): void {
     this.state = queryReducer(this.state, action)
 
-    this.observers.forEach(observer => {
-      observer.onQueryUpdate(action)
-    })
+    this.queryCache.batchNotifications(() => {
+      this.observers.forEach(observer => {
+        observer.onQueryUpdate(action)
+      })
 
-    this.queryCache.notifyGlobalListeners(this)
+      this.queryCache.notifyGlobalListeners(this)
+    })
   }
 
   private scheduleGc(): void {

src/core/queryCache.ts

@@ -2,11 +2,13 @@ import {
   Updater,
   deepIncludes,
   functionalUpdate,
+  getBatchedUpdates,
   getQueryArgs,
   isDocumentVisible,
-  isPlainObject,
   isOnline,
+  isPlainObject,
   isServer,
+  scheduleMicrotask,
 } from './utils'
 import { getResolvedQueryConfig } from './config'
 import { Query } from './query'
@@ -66,6 +68,8 @@ type QueryCacheListener = (
   query?: Query<unknown, unknown>
 ) => void
 
+type NotifyCallback = () => void
+
 // CLASS
 
 export class QueryCache {
@@ -75,13 +79,51 @@ export class QueryCache {
   private globalListeners: QueryCacheListener[]
   private queries: QueryHashMap
   private queriesArray: Query<any, any>[]
+  private notifyQueue: NotifyCallback[]
+  private notifyTransactions: number
 
   constructor(config?: QueryCacheConfig) {
     this.config = config || {}
     this.globalListeners = []
     this.queries = {}
     this.queriesArray = []
     this.isFetching = 0
+    this.notifyQueue = []
+    this.notifyTransactions = 0
+  }
+
+  batchNotifications(callback: () => void): void {
+    this.notifyTransactions++
+    callback()
+    this.notifyTransactions--
+    if (!this.notifyTransactions) {
+      this.executeNotifications()
+    }
+  }
+
+  executeNotifications(): void {
+    if (this.notifyQueue.length) {
+      scheduleMicrotask(() => {
+        const batchedUpdates = getBatchedUpdates()
+        batchedUpdates(() => {
+          const queue = this.notifyQueue
+          this.notifyQueue = []
+          queue.forEach(notify => {
+            notify()
+          })
+        })
+      })
+    }
+  }
+
+  scheduleNotification(notify: NotifyCallback): void {
+    if (this.notifyTransactions) {
+      this.notifyQueue.push(notify)
+    } else {
+      scheduleMicrotask(() => {
+        notify()
+      })
+    }
   }
 
   notifyGlobalListeners(query?: Query<any, any>) {
@@ -91,7 +133,9 @@ export class QueryCache {
     )
 
     this.globalListeners.forEach(listener => {
-      listener(this, query)
+      this.scheduleNotification(() => {
+        listener(this, query)
+      })
     })
   }
 
@@ -195,17 +239,18 @@ export class QueryCache {
       options || {}
 
     try {
-      await Promise.all(
-        this.getQueries(predicate, options).map(query => {
-          const enabled = query.isEnabled()
+      const promises: Promise<unknown>[] = []
 
+      this.batchNotifications(() => {
+        this.getQueries(predicate, options).forEach(query => {
+          const enabled = query.isEnabled()
           if ((enabled && refetchActive) || (!enabled && refetchInactive)) {
-            return query.fetch()
+            promises.push(query.fetch())
           }
-
-          return undefined
         })
-      )
+      })
+
+      await Promise.all(promises)
     } catch (err) {
       if (throwOnError) {
         throw err
@@ -363,8 +408,10 @@ export function makeQueryCache(config?: QueryCacheConfig) {
 export function onVisibilityOrOnlineChange(type: 'focus' | 'online') {
   if (isDocumentVisible() && isOnline()) {
     queryCaches.forEach(queryCache => {
-      queryCache.getQueries().forEach(query => {
-        query.onInteraction(type)
+      queryCache.batchNotifications(() => {
+        queryCache.getQueries().forEach(query => {
+          query.onInteraction(type)
+        })
       })
     })
   }

src/core/queryObserver.ts

@@ -139,7 +139,9 @@ export class QueryObserver<TResult, TError> {
   }
 
   private notify(): void {
-    this.listener?.(this.currentResult)
+    this.config.queryCache.scheduleNotification(() => {
+      this.listener?.(this.currentResult)
+    })
   }
 
   private updateStaleTimeout(): void {

src/core/tests/queryCache.test.tsx

@@ -5,7 +5,7 @@ import {
   mockConsoleError,
   mockNavigatorOnLine,
 } from '../../react/tests/utils'
-import { makeQueryCache, queryCache as defaultQueryCache } from '..'
+import { makeQueryCache, queryCache as defaultQueryCache } from '../..'
 import { isCancelledError, isError } from '../utils'
 
 describe('queryCache', () => {
@@ -348,14 +348,15 @@ describe('queryCache', () => {
       expect(query.queryCache).toBe(queryCache)
     })
 
-    test('notifyGlobalListeners passes the same instance', () => {
+    test('notifyGlobalListeners passes the same instance', async () => {
       const key = queryKey()
 
       const queryCache = makeQueryCache()
       const subscriber = jest.fn()
       const unsubscribe = queryCache.subscribe(subscriber)
       const query = queryCache.buildQuery(key)
       query.setData('foo')
+      await sleep(1)
       expect(subscriber).toHaveBeenCalledWith(queryCache, query)
 
       unsubscribe()

src/core/tests/utils.test.tsx

@@ -4,7 +4,7 @@ import {
   deepIncludes,
   isPlainObject,
 } from '../utils'
-import { setConsole, queryCache } from '..'
+import { setConsole, queryCache } from '../..'
 import { queryKey } from '../../react/tests/utils'
 
 describe('core/utils', () => {

src/core/utils.ts

@@ -249,3 +249,34 @@ export function createSetHandler(fn: () => void) {
     removePreviousHandler = callback(fn)
   }
 }
+
+/**
+ * Schedules a microtask.
+ * This can be useful to schedule state updates after rendering.
+ */
+export function scheduleMicrotask(callback: () => void): void {
+  Promise.resolve()
+    .then(callback)
+    .catch(error =>
+      setTimeout(() => {
+        throw error
+      })
+    )
+}
+
+type BatchUpdateFunction = (callback: () => void) => void
+
+// Default to a dummy "batch" implementation that just runs the callback
+let batchedUpdates: BatchUpdateFunction = (callback: () => void) => {
+  callback()
+}
+
+// Allow injecting another batching function later
+export function setBatchedUpdates(fn: BatchUpdateFunction) {
+  batchedUpdates = fn
+}
+
+// Supply a getter just to skip dealing with ESM bindings
+export function getBatchedUpdates(): BatchUpdateFunction {
+  return batchedUpdates
+}

src/index.ts

@@ -1,2 +1,6 @@
+import { setBatchedUpdates } from './core'
+import { unstable_batchedUpdates } from './react/reactBatchedUpdates'
+setBatchedUpdates(unstable_batchedUpdates)
+
 export * from './core/index'
 export * from './react/index'

src/react/reactBatchedUpdates.native.ts

@@ -0,0 +1,3 @@
+// @ts-ignore
+import { unstable_batchedUpdates } from 'react-native'
+export { unstable_batchedUpdates }