Miért fontos az immutabilitás az állapot kezelésében?

Question

Accepted Answer

**Az immutabilitás** azt jelenti, hogy soha nem módosítja az állapotot helyén — helyette egy **új** objektumot/tömböt hoz létre a módosításokkal. Ez központi ahhoz, hogy a React, Redux és hasonló eszközök hogyan észlelik a módosításokat és helyesen frissítik a felhasználói felületet.

## A mutáció problémája

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

A React (és Redux) a módosításokat **hivatkozások** (`oldState === newState`) összehasonlításával észleli, nem a mély tartalmakat — teljesítmény céljából. Ha helyén mutálja, a hivatkozás ugyanaz marad, így a keretrendszer azt gondolja, hogy semmi nem változott, és kihagyja az újrarajzolást.

## Immutable frissítési minták

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

A spread operátor felületi másolatokat hoz létre; beágyazott adatok esetén másolatot készít az egyes szintekről, amelyeket módosít.

## Miért hoz az immutabilitás több előnyt

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

## Segítő eszközök

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

Az Immer ergonomikussá teszi a beágyazott immutable frissítéseket azzal, hogy lehetővé teszi a mutációhoz hasonló kód írását egy piszkozaton, amelyet immutable frissítésé alakít.

## Miért fontos ez

Az immutabilitás az a mechanizmus, amely a hivatkozás alapú módosítás-érzékelést működteti — ezért az `[...items]` újrarajzolást indít el, de `items.push()` nem.

A helyesség mellett teljesítmény-optimalizálásokat (a memoizáció hivatkozásokat hasonlít össze) és hatékony funkciókat (visszavonás/ismétlés, időutazás) nyit fel.

Az immutable frissítési minták megértése (és az Immer-hez hasonló eszközök) elengedhetetlen a React/Redux helyes működéséhez; az állapot mutálása az egyik legelterjedtebb kezdő hiba.