Customize memoization safely
A project needs selector memoization other than the default while selectors may run inside Immer-backed reducers.
Redux Toolkit · Function
createDraftSafeSelectorCreator
Creates a customized, draft-safe selector factory by applying a chosen memoization function. Selectors from that factory work with both ordinary state and Immer drafts.
How it works
This function builds the draft-safe counterpart of a selector creator by wrapping a supplied memoization function. The resulting factory can create selectors that work with ordinary state and Immer draft state, recalculating when necessary for draft safety while retaining normal memoization for plain values.
Syntax
createDraftSafeSelectorCreator(memoize)Parameters
| Name | Type | Description |
|---|---|---|
memoize | function | Memoization function used by the generated selector creator. |
Returns
A draft-safe selector-creator function configured with the supplied memoization function.
Key points
- Redux Toolkit exports this utility as the configurable draft-safe counterpart to
createSelectorCreator. - Call it with a memoization function to obtain a specialized draft-safe selector factory.
- The returned factory follows selector-creator usage while adding protection for Immer draft inputs.
- Selectors made through the factory preserve normal memoization for non-draft state.
- Draft inputs trigger conservative recalculation so memoized results do not become unsafe.
Common mistakes
- Use this when you need a customized selector creator that remains safe when selectors receive Immer drafts.
Example: Create a draft-safe selector factory
import { createDraftSafeSelectorCreator, weakMapMemoize } from '@reduxjs/toolkit'
type State = { value: number }
const createWeakMapDraftSafeSelector =
createDraftSafeSelectorCreator(weakMapMemoize)
const selectValue = createWeakMapDraftSafeSelector(
(state: State) => state,
(state) => state.value,
)
console.log(selectValue({ value: 42 }))Creates a draft-safe selector factory using WeakMap-based memoization, then uses it to select a value.
When to use it
Configure adapter selectors
An entity adapter should generate selectors using a project-specific draft-safe selector creator.
Interview questions
QWhat does createDraftSafeSelectorCreator do?
It creates a draft-safe version of createSelectorCreator around the memoization function you provide. Selectors produced by the returned factory can be used with Immer-powered reducer logic.
Follow-up: Why is draft safety useful? With draft values, the selector favors recalculation to avoid relying on stale memoized results.
QHow is it used with custom memoization?
Pass the desired memoization function to it, then call the returned selector creator with input selectors and a result function. The page demonstrates this with weakMapMemoize.
Follow-up: How can the custom factory be used by entity-adapter selectors? Supply it as the createSelector option when calling getSelectors.
QHow does it behave with plain and draft state?
Plain state values continue to use normal memoization behavior, while Immer draft values cause the selector to recalculate when needed for safety. This lets one selector factory support both contexts.
Follow-up: What related default utility avoids configuring a memoizer yourself? Use createDraftSafeSelector.
Related
createDraftSafeSelectorcreateSelectorCreatorweakMapMemoizecreateSelector