Ana içeriğe geç

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.