React State Neden Immutable Olmalı? Kuralın Arkasındaki Mühendislik
React geliştirirken en sık duyduğumuz kural: "State’i doğrudan mutate etme." Peki ama neden? Bu yazıda, bu kuralın neden sadece bir stil tercihi olmadığını, React'in render motorunun kalbindeki referans karşılaştırması optimizasyonunu ve "Lazy Ant" felsefesine uygun, tahmin edilebilir kod yazmanın yollarını inceleyeceğiz.
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:
Mutate Etmek: Kutuyu açıp yeni oyuncağı içine atarsın. Kutu aynı kutudur, sadece içeriği değişmiştir.
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
Bu diziyi mutate ederseniz:
JavaScript
Ama immutable yaklaşım şöyle olur:
JavaScript
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
✅ Doğru Yaklaşım (Yeni State Üretimi):
JavaScript
Ancak daha da güvenli bir yol, önceki state'e güvenmektir (Functional Updates):
JavaScript
Immutable State'in Faydaları ve Immer
Bu yaklaşım, büyük uygulamalarda karmaşıklığı azaltır ve güvenliği artırır:
Predictability (Tahmin Edilebilirlik): State değişimleri daha net ve izlenebilir olur.
Debugging (Hata Ayıklama): Hataların nerede oluştuğu daha kolay bulunur.
Performans Optimizasyonları: React, değişimi çok daha hızlı algılar ve gereksiz render'lardan kaçınır.
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
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.
