Kodėl nekintamumas svarbus būsenų valdymui?

Question

Accepted Answer

**Nekintamumas** reiškia, kad niekada nenaudosite būsenos vietoje — vietoje to jūs kuriate **naują** objektą/masyvą su pakeitimais. Tai yra pagrindinė priemonė, kaip React, Redux ir panašūs įrankiai aptinka pokyčius ir teisingai atnaujina UI.

## Problema su mutacija

```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 (ir Redux) aptinka pokyčius lyginant **nuorodas** (`oldState === newState`), o ne gilų turinį — dėl našumo. Jei mutacijuosite vietoje, nuorodą lieka ta pati, todėl sistema mano, kad niekas nepasikeitė ir praleidžia perkūrą.

## Nekintami atnaujinimo šablonai

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

Plėtimo operatorius sukuria paviršiaus kopijas; vnestintiems duomenims jūs kopijuojate kiekvieną lygį, kurį keičiate.

## Kodėl nekintamumas duoda daugiau naudos

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

## Pagalbiniai įrankiai

```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 pagreitina vnestintus nekintamus atnaujinimus, leisdami rašyti lyg mutacijos atrodantį kodą projekto kopijoje, kurią jis konvertuoja į nekintamą atnaujinimą.

## Kodėl tai svarbu

Nekintamumas yra mechanizmas, kuris daro nuorodų paremtą pokyčio aptikimą veikusiu — todėl `[...items]` suaktyvina perkūrą, o `items.push()` ne.

Be teisingumo, jis atrakina efektyvumo optimizavimus (memoizacija lygina nuorodas) ir galingas funkcijas (undo/redo, time-travel).

Supratimas nekintamų atnaujinimo šablonų (ir įrankių kaip Immer) yra būtinas norint teisingai dirbti su React/Redux; būsenos mutacija yra vienas iš labiausiai paplitusių pradedantiesiems klaidų.