Napa immutabilitas penting ing manajemen negara?

Question

Accepted Answer

**Immutabilitas** tegese ora ngubah negara ing panggonan — sebagane, sampeyan nggawe **anyar** obyek/larik karo owahan. Iki penting banget cara React, Redux, lan alat saru liyane ndeteksi owahan lan ngapdate UI kanthi bener.

## Masalah karo 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 (lan Redux) ndeteksi owahan kanthi mbandingi **referensi** (`oldState === newState`), ora isi jero — kanggo kinerja. Yen sampeyan mutasi ing panggonan, referensi tetep padha, dadi kerangka pikir gak owah apa-apa lan ngalangi re-render.

## Pola update 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 spread nggawe salinan cethak; kanggo data bersarang sampeyan nyalin saben tingkat sing owah.

## Napa immutabilitas ngebawa manfaat liyane

```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 sing mbantu

```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 ndadekake update immutable bersarang ergonomis kanthi ngbolehake sampeyan nulis kode kaya mutasi ing draft sing dikon dadi update immutable.

## Napa penting

Immutabilitas minangka mekanisme sing ndadekake deteksi owahan adhedhasar referensi ana — iki *napa* `[...items]` nggawe re-render nanging `items.push()` ora.

Pajero kabenaran, iku buka optimasi kinerja (memoization mbandingi referensi) lan fitur kuat (undo/redo, time-travel).

Ngerti pola update immutable (lan alat kaya Immer) penting banget kanggo kerja benar karo React/Redux; mutasi negara minangka salah sawijining cacat paling umum pemula.