Miksi muuttumattomuus on tärkeä tilanhallinnan kannalta?

Question

Accepted Answer

**Muuttumattomuus** (immutability) tarkoittaa, että et koskaan muokkaa tilaa paikallaan — sen sijaan luot **uuden** objektin/taulukon muutoksilla. Tämä on keskeistä siihen, kuinka React, Redux ja vastaavat työkalut havaitsevat muutoksia ja päivittävät käyttöliittymän oikein.

## Ongelma muutoksissa

```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 (ja Redux) havaitsevat muutoksia vertaamalla **viitteitä** (`oldState === newState`), ei syvää sisältöä — suorituskyvyn vuoksi. Jos muokkaat paikallaan, viite pysyy samana, joten kehys luulee, että mitään ei muuttunut ja ohittaa uudelleenrenderöinnin.

## Muuttamattomat päivityskuviot

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

Levityoperaattori luo pintakopioita; sisäkkäisille tiedoille kopioit jokaisen muuttamasi tason.

## Miksi muuttumattomuus tuo enemmän hyötyjä

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

## Työkalut jotka auttavat

```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 tekee sisäkkäisistä muuttamattomista päivityksistä ergonomisia antamalla sinulle mahdollisuuden kirjoittaa muutosten kaltaista koodia vedoksella, jonka se muuntaa muuttamattomaksi päivitykseksi.

## Miksi se on tärkeää

Muuttumattomuus on mekanismi, joka saa viitteisiin perustuvan muutoksentunnistuksen toimimaan — se on *syy*, miksi `[...items]` käynnistää uudelleenrenderöinnin mutta `items.push()` ei.

Oikeellisuuden lisäksi se avaa suorituskyvyn optimoinnit (muistiin merkintä vertaa viitteitä) ja tehokkaat ominaisuudet (kumota/tee uudelleen, aika-matka).

Muuttamattomien päivityskuvioiden (ja Immerin kaltaisten työkalujen) ymmärtäminen on välttämätöntä React/Reduxin kanssa oikein työskentelemiselle; tilan muokkaaminen on yksi yleisimmistä aloittelijoiden virheistä.