ทำไม immutability จึงมีความสำคัญในการจัดการ state?

Question

Accepted Answer

**Immutability** หมายถึงการไม่แก้ไข state โดยตรง ณ ที่เดิม แต่จะสร้าง object/array **ใหม่** ที่มีการเปลี่ยนแปลงแทน ซึ่งเป็นแก่นสำคัญของวิธีที่ React, Redux และเครื่องมือที่คล้ายกันใช้ตรวจจับการเปลี่ยนแปลงและอัปเดต UI ได้อย่างถูกต้อง

## ปัญหาของการ mutate

```jsx
// ❌ mutating — React doesn't detect the change
function addItem(item) {
  items.push(item);   // same array reference → React sees "no change" → no re-render
  setItems(items);    // passing the same reference back
}

// ✅ immutable — a NEW array, new reference → React re-renders
function addItem(item) {
  setItems([...items, item]); // create a new array
}
```

React (และ Redux) ตรวจจับการเปลี่ยนแปลงโดยการเปรียบเทียบ **reference** (`oldState === newState`) ไม่ใช่การเปรียบเทียบเนื้อหาแบบลึก เพื่อประสิทธิภาพ หากคุณ mutate ณ ที่เดิม reference จะยังคงเหมือนเดิม framework จึงคิดว่าไม่มีอะไรเปลี่ยนแปลงและข้ามการ re-render ไป

## รูปแบบการอัปเดตแบบ immutable

```js
// arrays
setItems([...items, newItem]);                  // add
setItems(items.filter(i => i.id !== id));        // remove
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // update one

// objects
setUser({ ...user, name: "Bob" });               // update a field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // nested update
```

Spread operator จะสร้างสำเนาแบบตื้น (shallow copy) สำหรับข้อมูลที่ซ้อนกัน คุณต้องคัดลอกในแต่ละชั้นที่คุณเปลี่ยนแปลง

## ทำไม immutability จึงให้ประโยชน์มากกว่า

```text
✓ Reliable change detection → correct, efficient re-renders (reference equality)
✓ Enables performance optimizations (React.memo, OnPush, useMemo) that compare references
✓ Predictable state — old state is never altered, easing debugging
✓ Time-travel debugging & undo/redo (keep past state snapshots)
```

## เครื่องมือที่ช่วยได้

```js
// Immer (used by Redux Toolkit) lets you "mutate" a draft → produces an immutable result
produce(state, draft => { draft.items.push(item); }); // safe + readable
```

Immer ทำให้การอัปเดตแบบ immutable ที่ซ้อนกันใช้งานง่ายขึ้น โดยให้คุณเขียนโค้ดที่ดูเหมือนการ mutate บน draft แล้วมันจะแปลงเป็นการอัปเดตแบบ immutable ให้

## ทำไมจึงสำคัญ

Immutability คือกลไกที่ทำให้การตรวจจับการเปลี่ยนแปลงโดยอิงตาม reference ทำงานได้ มันคือ *เหตุผล* ที่ `[...items]` ทำให้เกิดการ re-render แต่ `items.push()` ไม่ทำ

นอกเหนือจากความถูกต้องแล้ว มันยังปลดล็อกการเพิ่มประสิทธิภาพ (memoization เปรียบเทียบ reference) และฟีเจอร์ที่ทรงพลัง (undo/redo, time-travel)

การเข้าใจรูปแบบการอัปเดตแบบ immutable (และเครื่องมืออย่าง Immer) เป็นสิ่งจำเป็นสำหรับการทำงานกับ React/Redux อย่างถูกต้อง การ mutate state เป็นหนึ่งในบั๊กที่พบบ่อยที่สุดของมือใหม่