Tại sao immutability lại quan trọng trong state management?

Question

Accepted Answer

**Immutability** (tính bất biến) nghĩa là không bao giờ sửa đổi state tại chỗ — thay vào đó, bạn tạo một object/array **mới** với các thay đổi. Đây là điều cốt lõi trong cách React, Redux và các công cụ tương tự phát hiện thay đổi và cập nhật UI một cách chính xác.

## Vấn đề khi mutate

```jsx
// ❌ mutate — React không phát hiện ra thay đổi
function addItem(item) {
  items.push(item);   // cùng reference array → React thấy "không đổi" → không re-render
  setItems(items);    // truyền lại cùng một reference
}

// ✅ immutable — một array MỚI, reference mới → React re-render
function addItem(item) {
  setItems([...items, item]); // tạo một array mới
}
```

React (và Redux) phát hiện thay đổi bằng cách so sánh **reference** (`oldState === newState`), không so sánh sâu nội dung — vì lý do hiệu năng. Nếu bạn mutate tại chỗ, reference vẫn giữ nguyên, nên framework nghĩ rằng không có gì thay đổi và bỏ qua re-render.

## Các pattern cập nhật immutable

```js
// arrays
setItems([...items, newItem]);                  // thêm
setItems(items.filter(i => i.id !== id));        // xóa
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // cập nhật một phần tử

// objects
setUser({ ...user, name: "Bob" });               // cập nhật một field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // cập nhật lồng nhau
```

Spread operator tạo bản sao nông (shallow copy); với dữ liệu lồng nhau bạn copy mỗi cấp mà bạn thay đổi.

## Tại sao immutability mang lại nhiều lợi ích hơn

```text
✓ Phát hiện thay đổi đáng tin cậy → re-render đúng và hiệu quả (reference equality)
✓ Cho phép tối ưu hiệu năng (React.memo, OnPush, useMemo) dựa trên so sánh reference
✓ State dễ đoán — state cũ không bao giờ bị thay đổi, dễ debug hơn
✓ Time-travel debugging & undo/redo (giữ các snapshot state quá khứ)
```

## Các công cụ hỗ trợ

```js
// Immer (dùng trong Redux Toolkit) cho phép "mutate" một draft → tạo ra kết quả immutable
produce(state, draft => { draft.items.push(item); }); // an toàn + dễ đọc
```

Immer làm cho việc cập nhật immutable lồng nhau trở nên tiện lợi bằng cách cho phép bạn viết code trông như đang mutate trên một draft, rồi nó chuyển thành một cập nhật immutable.

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

Immutability là cơ chế giúp việc phát hiện thay đổi dựa trên reference hoạt động — đó là *lý do* `[...items]` kích hoạt re-render nhưng `items.push()` thì không.

Ngoài tính đúng đắn, nó còn mở khóa các tối ưu hiệu năng (memoization so sánh reference) và các tính năng mạnh mẽ (undo/redo, time-travel).

Hiểu các pattern cập nhật immutable (và công cụ như Immer) là điều thiết yếu để làm việc đúng cách với React/Redux; mutate state là một trong những bug phổ biến nhất của người mới.