What are the advanced patterns for selector composition?
Answer
Advanced selector patterns for scalable Redux: Parameterized selectors with factory functions: const makeSelectTodoById = () => createSelector([selectAllTodos, (_, id) => id], (todos, id) => todos.find(t => t.id === id));. Create an instance per component: const selectTodo = useMemo(makeSelectTodoById, []); const todo = useSelector(s => selectTodo(s, id)); — each component instance has its own memoized selector cache. Selector composition: build complex selectors from simple ones: const selectFilteredSortedUsers = createSelector([selectActiveUsers, selectSortOrder], (users, order) => [...users].sort(...)). Cross-slice selectors: selectors that combine data from multiple slices: const selectUserWithOrders = createSelector([selectUser, selectOrdersByUserId], (user, orders) => ({ ...user, orders })). Reselect v5 weakMemo: cache unlimited recent results using WeakMap — better for parameterized selectors with many possible inputs. createSelectorCreator: custom memoization strategy (e.g., Lodash's isEqual for deep comparison). Always profile before optimizing selectors — premature memoization adds complexity without benefit.
Previous
How do you handle real-time state updates with WebSockets and Redux?
Next
What is the proxy state pattern (Valtio / Immer) versus immutable state?
More Redux / State Management Questions
View all →- Advanced How do you architect state management for large-scale React applications?
- Advanced What is Redux-Saga and how does it differ from Thunks?
- Advanced What is XState and state machines in UI development?
- Advanced How does TanStack Query's caching and staleness model work?
- Advanced What are the patterns for sharing state between micro-frontends?