React State Neden Immutable Olmalı? Kuralın Arkasındaki Mühendislik

React geliştirirken en sık duyduğumuz, adeta bir mantra haline gelen kural şudur: “State’i doğrudan mutate etme (değiştirme).” Çoğu geliştirici bu kurala uyar, ancak arkasındaki teknik zorunluluğu ve performans yansımalarını tam olarak anlamaz. Bu yazıda, React state'in neden immutable (değiştirilemez) olması gerektiğini, basit bir mental modelden teknik detaylara uzanan bir çizgide inceleyeceğiz.

Basit Bir Hikaye: Eski Kutu vs. Yeni Kutu

Bunu 6 yaşındaki bir çocuğa anlatır gibi düşünelim. Elinde bir oyuncak kutusu olduğunu hayal et. Kutunun içinde bir araba, bir top ve bir lego var. Bir gün bu kutuya yeni bir oyuncak eklemek istiyorsun.

İki farklı yol var:

1. Mutate Etmek: Kutuyu açıp yeni oyuncağı içine atarsın. Kutu aynı kutudur, sadece içeriği değişmiştir.

2. Immutable Yaklaşım: Yeni, boş bir kutu alırsın. Eski kutudaki tüm oyuncakları ve yeni oyuncağı bu yeni kutuya koyarsın. Eski kutu hiç değişmemiş olur.

React, ikinci yöntemi sever. Çünkü eski kutu (eski state) bozulmamış olur ve bu, değişimi fark etmeyi inanılmaz derecede hızlandırır.

Teknik Tanım: Immutable Nedir?

Immutable kelimesi, oluşturulduktan sonra değiştirilemez veri anlamına gelir. Bir değeri değiştirmek yerine, o değerin güncellenmiş halini içeren yeni bir kopyasını üretirsiniz.

Örneğin, bir JavaScript dizisi (array) düşünelim:

JavaScript

const numbers = [1, 2, 3];

Bu diziyi mutate ederseniz:

JavaScript

numbers.push(4); // Ana dizi değişti. Bu bir "mutation"dır.

Ama immutable yaklaşım şöyle olur:

JavaScript

const newNumbers = [...numbers, 4]; // Spread operatörü ile yeni bir dizi oluşur.
// Eski dizi (numbers) değişmez.

React Neden Buna Muhtaç? Referans Karşılaştırması ve Performans

React, uygulamanızın performansını korumak için zekice optimizasyonlar yapar. Bu optimizasyonların kalbinde referans karşılaştırması (reference comparison) yatar.

JavaScript'te nesneler (object) ve diziler (array) bellekte bir referans adresiyle tutulur. React, state güncellendiğinde tüm nesneyi derinlemesine taramak (deep comparison) yerine, sadece referansın değişip değişmediğine bakar:

React'in Mantığı: "Eğer state nesnesinin referansı değişmemişse, state aynı kalmıştır. Render yapmama gerek yok."

Bu yüzden mutation, React'in değişimi fark etmemesine ve bileşenin güncellenmemesine neden olabilir. Aynı referansla setTodos(todos) derseniz, React "Ee, referans aynı, bir şey değişmemiş" der ve arayüzü güncellemez.

"Lazy Ant" Yaklaşımı: Predicatable State Üretimi

"Lazy Ant" felsefesi, kodun tahmin edilebilir ve sürdürülebilir olmasını savunur. State'i immutable tutmak, bu felsefenin React'teki karşılığıdır.

❌ Yanlış Yaklaşım (Predictable Değil):

JavaScript

todos.push(newTodo); // Ana state'i bozduk.
setTodos(todos); // Aynı referansı gönderdik.

✅ Doğru Yaklaşım (Yeni State Üretimi):

JavaScript

setTodos([...todos, newTodo]); // Yepyeni bir dizi referansı. React hemen fark eder.

Ancak daha da güvenli bir yol, önceki state'e güvenmektir (Functional Updates):

JavaScript

setTodos(prevTodos => [...prevTodos, newTodo]); // En güncel state'i garanti eder.

Immutable State'in Faydaları ve Immer

Bu yaklaşım, büyük uygulamalarda karmaşıklığı azaltır ve güvenliği artırır:

1. Predictability (Tahmin Edilebilirlik): State değişimleri daha net ve izlenebilir olur.

2. Debugging (Hata Ayıklama): Hataların nerede oluştuğu daha kolay bulunur.

3. Performans Optimizasyonları: React, değişimi çok daha hızlı algılar ve gereksiz render'lardan kaçınır.

4. Time-Travel Debugging: Redux veya Zustand gibi araçlar, state geçmişini saklayarak geçmişe dönmenizi sağlar.

Modern React araçları bu yapıyı destekler. Özellikle Immer, immutable state yazmayı çok kolaylaştırır. Immer ile kodunuz mutation gibi görünse de, arka planda güvenli bir şekilde immutable çalışır.

JavaScript

// Immer ile:
setTodos(draft => {
  draft.push(newTodo); // Mutation gibi görünür ama Immer arka planda yeni state üretir.
});

Sonuç: Yeni Bir State Üret

React'te immutability bir stil tercihi değildir; bu yaklaşım React'in çalışma modeliyle uyumludur, state yönetimini daha güvenli hale getirir ve büyük uygulamalarda karmaşıklığı azaltır. State'i güncellemenin en güvenli yolu onu değiştirmek değil, yeni bir versiyonunu üretmektir.