autobatchenhancer

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

autoBatchEnhancer signature and return type

autoBatchEnhancer is a store enhancer function with the signature: export type autoBatchEnhancer = (options?: AutoBatchOptions) => StoreEnhancer. It accepts optional AutoBatchOptions and returns a StoreEnhancer.

AutoBatchOptions type definition

AutoBatchOptions is a union type with four variants: { type: 'tick' } uses queueMicrotask, { type: 'timer'; timeout: number } uses setTimeout, { type: 'raf' } uses requestAnimationFrame (default), or { type: 'callback'; queueNotification: (notify: () => void) => void } for custom queuing.

SHOULD_AUTOBATCH type and purpose

SHOULD_AUTOBATCH is an exported string constant. Actions tagged with action.meta[SHOULD_AUTOBATCH] = true are treated as low-priority and have their subscriber notifications queued and delayed. The value is meant to be opaque and could change to a Symbol in the future.

autoBatchEnhancer behavior with low-priority actions

When autoBatchEnhancer detects an action with action.meta[SHOULD_AUTOBATCH] = true, it immediately updates the reducer but queues a callback to notify subscribers on a delay. If additional low-priority actions are dispatched in succession, subscriber notifications continue to be delayed until the queued callback runs.

autoBatchEnhancer behavior with normal-priority actions

When a normal-priority action (without action.meta[SHOULD_AUTOBATCH] = true) is dispatched after low-priority actions have been queued, the enhancer immediately notifies all subscribers synchronously and does not wait for the queued callback. This allows synchronous handling of high-priority actions.

autoBatchEnhancer default behavior

The default behavior of autoBatchEnhancer is to queue notifications using requestAnimationFrame.

autoBatchEnhancer configuration with getDefaultEnhancers example

To configure autoBatchEnhancer in RTK 2.0, use: const store = configureStore({ reducer: () => 0, enhancers: (getDefaultEnhancers) => getDefaultEnhancers({ autoBatch: { type: 'tick' } }), }). This pattern allows passing AutoBatchOptions to customize the enhancer behavior.

Basic usage example with autoBatchEnhancer and prepareAutoBatched

import { createSlice, configureStore, autoBatchEnhancer, prepareAutoBatched } from '@reduxjs/toolkit'. Define a slice with a batched action: incrementBatched: { reducer(state) { state.value += 1 }, prepare: prepareAutoBatched<void>() }. The store is created with configureStore({ reducer: counterSlice.reducer }), which includes the enhancer by default in RTK 2.0.

RTK Query integration with autoBatchEnhancer

RTK Query marks several of its key internal action types as batchable. When autoBatchEnhancer is added to the store setup, it improves overall UI performance, especially when rendering large lists of components that use the RTKQ query hooks.

Give your agent this brain