Derived state là gì và tại sao nên tránh nhân bản nó?

Question

Accepted Answer

**Derived state** là bất kỳ giá trị nào bạn có thể **tính từ state hiện có** thay vì lưu riêng. Nguyên tắc: nếu bạn có thể tính ra nó, đừng lưu nó — hãy suy ra (derive) nó mỗi lần render. Lưu các giá trị có thể suy ra mời gọi việc chúng bị lệch nhau (out of sync).

## Anti-pattern: lưu cái mà bạn có thể tính ra

```jsx
// ❌ lưu một giá trị derived thành state riêng
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // TRÙNG LẶP — có thể suy ra từ items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // phải nhớ cập nhật cả total — dễ quên 🐛
  }
}
```

Giờ `total` là một bản sao thứ hai của thông tin vốn đã có trong `items`. Mỗi thay đổi của `items` *cũng* phải cập nhật `total`, và ngay khi bạn bỏ sót một lần (một thao tác xóa, một thay đổi số lượng), chúng lệch nhau và UI hiển thị tổng sai.

## Cách khắc phục: suy ra nó khi render

```jsx
// ✅ tính total từ items — luôn đúng, không bao giờ lệch nhau
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived mỗi lần render

function addItem(item) {
    setItems([...items, item]); // MỘT lần cập nhật; total tự tính lại
  }
}
```

Với `total` được suy ra, không có gì thêm phải đồng bộ — thay đổi `items` và tổng luôn đúng.

## Chỉ memoize nếu phép tính tốn kém

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // phép suy ra tốn kém
  [items]                                            // chỉ tính lại khi items thay đổi
);
```

Với các phép suy ra nặng (lọc/sắp xếp danh sách lớn), `useMemo`/`computed`/selector cache kết quả để nó chỉ tính lại khi dependency thay đổi — nhưng nó vẫn là *derived*, không phải lưu thành state độc lập.

## Các giá trị derived thường gặp

```text
Tổng/đếm số lượng, danh sách đã lọc hoặc sắp xếp, fullName từ first+last,
isValid từ các field form, chuỗi đã format/hiển thị, "đã chọn tất cả chưa?"
```

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

Không nhân bản derived state là một áp dụng trực tiếp của single-source-of-truth — nó loại bỏ cả một lớp bug nơi các bản sao lệch nhau.

Quy tắc "derive, đừng store" giữ cho state tối thiểu và UI nhất quán một cách tự nhiên.

Nhận biết cái gì có thể suy ra (và chỉ dùng `useMemo`/computed/selector vì hiệu năng, không bao giờ để tạo ra một source of truth thứ hai) là dấu hiệu của thiết kế state sạch sẽ, ít bug.