Reduce repeated subscriber work
Several state updates are dispatched together and subscriber work, such as UI rendering, should be deferred.
Redux Toolkit · Function
autoBatchEnhancer
autoBatchEnhancer delays subscriber notifications while consecutive low-priority actions are dispatched. It flushes on its scheduled callback or when a normal-priority action arrives in the same tick.
- Since
- 1.9.0
How it works
autoBatchEnhancer delays subscriber notifications for consecutive low-priority actions. It flushes when its queued callback runs or when a normal-priority action is dispatched in the same tick.
Syntax
autoBatchEnhancer(options?: AutoBatchOptions)Parameters
| Name | Type | Description |
|---|---|---|
options | AutoBatchOptions | Optional configuration selecting raf, tick, timer, or callback notification scheduling. |
Returns
A Redux store enhancer that delays subscriber notifications for tagged low-priority actions.
Key points
- It groups consecutive low-priority dispatches so subscribers do not necessarily run after every individual update.
- The first of the scheduled flush and a subsequent normal-priority dispatch determines when subscribers are notified.
- The default scheduling strategy waits for requestAnimationFrame.
- The tick strategy schedules notification in a microtask.
- The timer strategy supports a configured timeout through setTimeout.
- The callback strategy delegates scheduling to an application-provided function.
Common mistakes
- Do not add it manually when using configureStore in RTK 2.0 or later; customize the included enhancer through the enhancers callback.
- An action must carry the expected metadata marker to receive delayed notification behavior.
- A normal action can cause subscribers to run before the scheduled callback, so batching is not an unconditional delay.
Example: Configure autoBatchEnhancer via configureStore
import { configureStore, createSlice } from '@reduxjs/toolkit'
const slice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1 },
},
})
const store = configureStore({
reducer: slice.reducer,
enhancers: (getDefaultEnhancers) =>
getDefaultEnhancers({ autoBatch: { type: 'tick' } }),
})
store.dispatch({
type: 'counter/increment',
meta: { RTK_autoBatch: true },
})Configures the default enhancer with microtask-based notification scheduling and dispatches a low-priority action.
When to use it
Choose a scheduling strategy
The default requestAnimationFrame timing is unsuitable for a particular environment or latency requirement.
Provide custom notification scheduling
A project needs application-specific debouncing or throttling of subscriber notifications.
Interview questions
QWhat problem does autoBatchEnhancer solve?
It is a store enhancer that recognizes consecutive low-priority actions and postpones subscriber notifications. Notifications occur when the scheduled callback executes or when a normal-priority action arrives in the same tick.
Follow-up: How can its scheduling policy be changed? Pass an options object selecting raf, tick, timer, or callback behavior through configureStore's enhancer customization.
QHow is autoBatchEnhancer configured in modern RTK?
RTK 2.0 includes it in configureStore by default. To change its behavior, provide an enhancers callback and customize the autoBatch option returned by getDefaultEnhancers.
Follow-up: How would you preserve the other default enhancers? Return getDefaultEnhancers with the autoBatch options rather than replacing the enhancer list outright.
QWhat scheduling modes does the enhancer support?
The default queue uses requestAnimationFrame. The tick option uses queueMicrotask, timer uses setTimeout, and callback lets the application supply its own notification scheduler.
Follow-up: When would a custom callback be useful? It can implement application-specific debouncing or throttling around subscriber notification.
Related
configureStoregetDefaultEnhancersprepare callbackSHOULD_AUTOBATCH