Memoized derived data
Derive filtered, sorted, or aggregated data from Redux state while avoiding unnecessary recalculation.
Redux Toolkit · Function
createSelector
Redux Toolkit re-exports Reselect's createSelector for building memoized selectors. It combines input selectors with a result function to calculate derived data efficiently.
How it works
Call createSelector with one or more input selectors and a result function. It returns a memoized selector: the result function receives the extracted input values and runs again when an input selector produces a new value, allowing derived references to remain stable between changes.
Syntax
createSelector(inputSelectors, resultFunc)Parameters
| Name | Type | Description |
|---|---|---|
inputSelectors | Array<(...args: unknown[]) => unknown> or selector arguments | One or more input selector functions that extract values from the selector arguments. |
resultFunc | (...inputs: unknown[]) => unknown | A function receiving the input-selector results and returning the derived output. |
Returns
A new memoized selector function.
Key points
- Redux Toolkit exposes Reselect's createSelector from its own package entry point.
- The function constructs selectors that cache derived results rather than recalculating on every call.
- Input selectors read the values needed by the derivation from the selector's arguments.
- The result function combines the extracted values into the selector's returned result.
- Recomputation is tied to changes in input-selector outputs, not automatically to every state update.
Common mistakes
- Memoization depends on input-selector results: changing unrelated state does not recompute the result, but a new input value does.
Example: Memoized derived selector
import { createSelector } from '@reduxjs/toolkit'
type Todo = { id: string; completed: boolean }
type RootState = { todos: Todo[] }
const selectTodos = (state: RootState) => state.todos
export const selectCompletedTodos = createSelector(
[selectTodos],
todos => todos.filter(todo => todo.completed)
)
const state: RootState = {
todos: [{ id: '1', completed: true }, { id: '2', completed: false }]
}
console.log(selectCompletedTodos(state))Creates a memoized selector that derives completed todos from the root state's todo collection.
When to use it
Shared state queries
Create reusable selectors for components or other code that reads the store.
Render optimization
Keep derived result references stable when the relevant input values have not changed.
Interview questions
QWhat does createSelector do?
createSelector accepts input selectors followed by a result function and returns a memoized selector. The result function receives the values returned by the inputs rather than the entire state directly.
Follow-up: Why can this reduce React renders? A stable derived reference can remain unchanged between relevant input changes, so useSelector's reference comparison can avoid a render.
QWhen does the result function run?
It recalculates the derived result when an input selector returns a new value. If the inputs produce the same values, the memoized result can be reused.
Follow-up: What should an input selector generally return? A focused state value or argument-derived value whose identity changes when the data relevant to the derivation changes.
QWhere does Redux Toolkit's createSelector come from?
Redux Toolkit re-exports createSelector from Reselect, so applications using RTK can import it from @reduxjs/toolkit without installing Reselect separately. It is a utility for creating memoized selectors.
Follow-up: What related RTK selector is intended for reducer code using Immer drafts? createDraftSafeSelector, the wrapped variant documented alongside createSelector.
Related
createDraftSafeSelectorcreateDraftSafeSelectorCreatorReselectselector functions