React Architecture
React State & Immutability:
Neden ve Nasıl?
01. Reconciliation & Referans Eşitliği
React, performansı korumak için "Shallow Comparison" (Yüzeysel Karşılaştırma) yapar. Yani prevProps === nextProps kontrolü sadece bellek referanslarına bakar.
Eğer bir objenin içindeki veriyi değiştirip (mutation) aynı objeyi state'e verirseniz, referans değişmediği için React değişikliği fark etmez ve re-render tetiklemez.
// YANLIŞ (Mutation)
const updateUser = () => {
user.name = "Ahmet"; // Referans aynı kaldı!
setUser(user); // React: "E bu aynı obje, render yok."
}
// DOĞRU (Immutable Update)
const updateUser = () => {
// Yeni bir obje referansı oluşturuyoruz
setUser(prev => ({ ...prev, name: "Ahmet" }));
}
02. Derin Kopyalama (Deep Copy) Yöntemleri
Spread operatörü (...) sadece 1. seviyeyi kopyalar (Shallow Copy). İç içe objelerde (Nested Objects) referanslar korunur, bu da yan etkilere (side-effects) yol açabilir.
1. structuredClone() (Modern & Native)
2022'den beri tarayıcılarda yerleşik. JSON.parse'dan daha hızlı ve Date, Map, Set gibi tipleri de kopyalayabilir.
2. JSON.parse(JSON.stringify()) (Hack)
Yavaştır. Function, Date veya undefined değerlerini kaybeder. Artık önerilmiyor.
const original = {
socials: { twitter: "@ahmet" },
date: new Date()
};
// Spread (Shallow Copy) - Nested referans kopmaz!
const shallow = { ...original };
shallow.socials.twitter = "@mehmet";
// original.socials.twitter da değişti!
// structuredClone (Deep Copy)
const deep = structuredClone(original);
deep.socials.twitter = "@mehmet";
// original etkilenmez. Güvenli.