Durum yönetiminde değişmezlik neden önemlidir?

Question

Accepted Answer

**Değişmezlik** (immutability), durumu asla yerinde değiştirmemek anlamına gelir — bunun yerine, değişiklikleri içeren **yeni** bir nesne/dizi oluşturursunuz. Bu, React, Redux ve benzer araçların değişiklikleri algılaması ve UI'ı doğru şekilde güncellemesinin merkezinde yer alır.

## Mutasyon sorunları

```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 (ve Redux) değişiklikleri **referansları** karşılaştırarak (`oldState === newState`) algılar, derin içeriği değil — performans için. Yerinde mutasyon yaparsanız, referans aynı kalır, bu nedenle framework hiçbir şeyin değişmediğini düşünür ve yeniden render işlemini atlar.

## Değişmez güncelleme desenleri

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

Spread operatörü sığ kopyalar oluşturur; iç içe veriler için değiştirdiğiniz her seviyeyi kopyalarsınız.

## Değişmezlik neden daha fazla avantaj getirir

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

## Yardımcı araçlar

```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, taslak üzerinde mutasyon gibi görünen kodu yazmanıza izin vererek değişmez güncellemeleri ergonomik hale getirir ve bunu değişmez bir güncellemeye dönüştürür.

## Neden önemli

Değişmezlik, referans tabanlı değişiklik algılamayı çalışmasını sağlayan mekanizmadır — `[...items]` yeniden render işlemini tetiklemesinin *nedeni* budur ama `items.push()` etmez.

Doğruluktan öte, performans optimizasyonlarını açığa çıkarır (memoization referansları karşılaştırır) ve güçlü özellikler sağlar (geri alma/yineleme, zaman yolculuğu).

Değişmez güncelleme desenleri (ve Immer gibi araçlar) hakkındaki anlayış, React/Redux ile doğru şekilde çalışmak için gereklidir; durum mutasyonu, en yaygın başlangıç seviyesi hatalarından biridir.