Code Quiz

Memoized Selector Reference Trap

A Reselect selector silently recomputes on every render because of where the filtering happens.

Codetypescript

import { createSelector } from 'reselect';

interface Todo { id: string; done: boolean; }
interface RootState { todos: Todo[]; filter: string; }

// Intended: memoize the list of active todos so components
// only re-render when the active set actually changes.
export const selectActiveTodos = createSelector(
  [(state: RootState) => state.todos.filter(t => !t.done)],
  (activeTodos) => activeTodos
);

// Used in many components via useSelector(selectActiveTodos)
// but they keep re-rendering on unrelated state updates.

Why does this selector fail to memoize and cause unnecessary re-renders?

← PreviousDependency Inversion Across Feature Modules Next →State Architecture Tradeoffs at Scale