Mengapa immutabilitas penting dalam pengurusan keadaan?

Question

Accepted Answer

**Immutabilitas** bermakna tidak pernah mengubah keadaan di tempat — sebaliknya, anda membuat objek/tatasusunan **baru** dengan perubahan. Ini adalah pusat bagaimana React, Redux, dan alat serupa mengesan perubahan dan mengemas kini UI dengan betul.

## Masalah dengan mutasi

```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 (dan Redux) mengesan perubahan dengan membandingkan **rujukan** (`oldState === newState`), bukan kandungan dalam — untuk prestasi. Jika anda mengubah di tempat, rujukan tetap sama, jadi rangka kerja fikir tiada yang berubah dan melangkau render semula.

## Pola kemas kini 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
```

Operator penyebaran membuat salinan cetek; untuk data bersarang anda menyalin setiap tingkat yang anda ubah.

## Mengapa immutabilitas membawa lebih banyak manfaat

```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)
```

## Alat yang membantu

```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 membuat kemas kini immutable bersarang ergonomik dengan membolehkan anda menulis kod yang kelihatan mutasi pada draf yang ia tukarkan kepada kemas kini immutable.

## Mengapa ia penting

Immutabilitas ialah mekanisme yang menjadikan pengesanan perubahan berasaskan rujukan berfungsi — ia *mengapa* `[...items]` mencetuskan render semula tetapi `items.push()` tidak.

Melampaui ketepatan, ia membuka pengoptimuman prestasi (pememoian membandingkan rujukan) dan ciri-ciri berkuasa (undo/redo, time-travel).

Memahami pola kemas kini immutable (dan alat seperti Immer) adalah penting untuk bekerja dengan betul dengan React/Redux; keadaan mutasi adalah salah satu pepijat pemula yang paling biasa.