Selector và memoization trong state management là gì?

Question

IT Interview Practice · Accepted Answer

Một **selector** là một hàm **đọc (suy ra) một mẩu dữ liệu cụ thể từ state**. **Memoization** cache kết quả của một selector để nó chỉ tính lại khi đầu vào thay đổi — quan trọng cho hiệu năng khi selector làm việc tốn kém hoặc để tránh các re-render không cần thiết.

## Selector cơ bản — đóng gói việc truy cập state

```js
// một selector biết CÁCH lấy một giá trị ra khỏi hình dạng (shape) của state
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

Selector tập trung kiến thức về cấu trúc state — các component hỏi `selectCartTotal(state)` mà không cần biết nó được lưu ở đâu/như thế nào, nên nếu hình dạng state thay đổi bạn chỉ cập nhật một selector, không phải mọi component.

## Vấn đề: selector derived tính lại ở mỗi lần gọi

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // chạy MỖI lần, dù items không đổi
```

Một selector tạo ra một array/object mới sẽ trả về một **reference mới** ở mỗi lần gọi — điều này có thể kích hoạt re-render không cần thiết (React thấy một giá trị "mới") và lãng phí tính toán.

## Cách khắc phục: selector được memoize (Reselect)

```js
import { createSelector } from "reselect"; // hoặc createSelector của RTK

const selectActiveSorted = createSelector(
  [state => state.items],                       // (các) input selector
  (items) => items.filter(i => i.active).sort(compareFn) // chỉ tính lại nếu items đổi
);
```

`createSelector` cache kết quả và chỉ chạy lại phép tính tốn kém khi đầu vào (`state.items`) thực sự thay đổi — nếu không nó trả về **cùng một reference**, ngăn cả việc tính lại lẫn các re-render xuôi dòng.

## Kết hợp các selector

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // xây trên các selector khác
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

Selector có thể kết hợp (compose), xây các phép suy ra phức tạp từ các mảnh đơn giản, được cache riêng lẻ.

## Tại sao điều này quan trọng

Selector tách rời các component khỏi hình dạng của state (một lợi ích về bảo trì) và cung cấp một nơi duy nhất để biểu diễn dữ liệu derived.

Memoization khiến selector derived hiệu quả — tránh tính toán tốn kém lặp lại và, quan trọng hơn, trả về reference ổn định để các component đã connect không re-render một cách không cần thiết.

Trong các app Redux/NgRx, selector được memoize (Reselect/`createSelector`) là một công cụ hiệu năng và kiến trúc then chốt; cùng ý tưởng cache đó xuất hiện dưới dạng `useMemo` và `computed` ở nơi khác.

Selector cơ bản — đóng gói việc truy cập state

Vấn đề: selector derived tính lại ở mỗi lần gọi

Cách khắc phục: selector được memoize (Reselect)

Kết hợp các selector

Tại sao điều này quan trọng

Câu hỏi liên quan