State ManagementcreateSelector memoize kết quả selector — chỉ recompute khi input thay đổi, tránh re-render không cần thiết khi filter/map trả về reference mới.
- Selector là function nhận toàn bộ Redux state và trích xuất/tính toán phần data cần thiết, ví dụ:
const selectActiveTodos = state => state.todos.filter(t => !t.completed). - Vấn đề:
filter()tạo array mới mỗi lần gọi →useSelectorthấy reference khác → component re-render dù data không đổi.createSelectortừ Reselect giải quyết bằng memoization: chỉ tính toán lại khi input selectors trả về giá trị khác.
Ví dụ: createSelector([selectTodos, selectFilter], (todos, filter) => todos.filter(t => t.status === filter)) — nếu todos và filter không đổi, trả về kết quả cached.
createSelector memoizes the selector result — only recomputes when inputs change, preventing re-renders when filter/map returns new references.
- A selector is a function that takes the full Redux state and extracts or computes the data needed, e.g.,
const selectActiveTodos = state => state.todos.filter(t => !t.completed). - Problem:
filter()creates a new array on every call →useSelectorsees a different reference → component re-renders even when data hasn't changed.createSelectorfrom Reselect solves this with memoization: it only recomputes when input selectors return different values. - Example:
createSelector([selectTodos, selectFilter], (todos, filter) => todos.filter(t => t.status === filter))— returns cached result if todos and filter haven't changed. - Common pitfall: defining a selector inside a component means memoization doesn't work because a new selector is created on every render — always define selectors outside components or use
useMemo. - In large apps, selector composition (selectors using other selectors) promotes reuse of computed logic.