Selector trong Redux là gì? Tại sao nên dùng createSelector?

Question

Luyện Phỏng Vấn IT · Accepted Answer

createSelector 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 → useSelector thấy reference khác → component re-render dù data không đổi. createSelector từ 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.

Pitfall phổ biến: tạo selector bên trong component khiến memoization không hoạt động vì selector mới được tạo mỗi render — luôn định nghĩa selector bên ngoài component hoặc dùng useMemo.