Memoised Selectors with createSelector

Compute once per input change

A selector that returns a new array, such as state.todos.filter(...), produces a new reference on every call, so useSelector re-renders the component after every dispatched action. createSelector (from Reselect, re-exported by Redux Toolkit) takes input selectors and a result function; it recomputes only when the input results change by reference and otherwise returns the cached result. Keep raw state minimal and derive totals, filters and joins with selectors. Selectors that take arguments need care with cache size; check the Reselect docs for your version's memoisation defaults.

Visible todos and a count

Composable memoised selectors.

import { createSelector } from '@reduxjs/toolkit';

const selectFilter = (state: RootState) => state.todos.filter;

export const selectVisibleTodos = createSelector(
  [selectAllTodos, selectFilter],
  (todos, filter) => (filter === 'open' ? todos.filter((t) => !t.done) : todos)
);

export const selectOpenCount = createSelector(
  [selectAllTodos],
  (todos) => todos.filter((t) => !t.done).length
);

// component
const visible = useAppSelector(selectVisibleTodos); // same reference until inputs change

Do not memoise trivial lookups

A selector like (s) => s.user.name already returns a stable value. Use createSelector when the result function creates new arrays or objects or does real work.

त्वरित जाँच: When does a createSelector result function run again?

• Whenever any component re-renders
• On every call
• Only once at startup
• When one of its input selector results changes by reference