1. Neden Klasik Eşitlik (== veya ===) Yetmiyor?

JavaScript’in doğuştan gelen bazı tuhaflıkları vardır. React ekibi, bu tuhaflıkların uygulamanın mantığını bozmasını istemediği için Object.is (Same-Value Equality) yöntemini seçti.

A. NaN Problemi (Not-a-Number)

JavaScript’te NaN, kendisine eşit olmayan tek değerdir.

Eğer React === kullansaydı, state'iniz NaN olduğunda her setState(NaN) çağrısında React "Aaa değer değişmiş!" sanıp sonsuz döngüye (infinite loop) girerdi. Object.is ise bu sorunu çözer:

B. +0 ve -0 Farkı

Matematiksel olarak 0 her zaman 0'dır ama bilgisayar biliminde işaretli sıfırlar vardır. === bunları aynı kabul eder ama Object.is farklı görür.

2. Referans Tipleri: En Büyük Yanılgı

Asıl “Advanced” kısım burası. Object.is primitive (ilkel) tiplerde (string, number, boolean) değerlere bakarken; Object ve Array’lerde sadece bellek adresine (referansa) bakar.

Senaryo: “Hani değişmişti?”

Geliştiricilerin en çok düştüğü hata şudur:

Burada ekran güncellenmez. Neden?

1. user değişkeni bellekte 0x001 adresinde duruyor.
2. Sen objenin içini değiştirdin ama adres hala 0x001.
3. React Object.is(eskiUser, yeniUser) yapar.
4. İkisi de 0x001 olduğu için sonuç true döner.
5. React: “Bailing Out” (Vazgeçiyorum, render yapmıyorum) der.

3. React Bu Algoritmayı Nasıl Uyguluyor?

React’in içinde bu kontrolü yapan fonksiyonun (polyfill) mantığı şöyledir:

4. Advanced Trick: “Eager State Update”

React bazen o kadar akıllıdır ki, daha render aşamasına geçmeden Object.is ile kontrolü yapar. Buna Eager Update denir. Eğer yeni state eskisiyle aynıysa, React bileşeninizin gövdesini (body) bile çalıştırmaz. Bu, büyük uygulamalarda ciddi bir performans kazancıdır.

Özetle Yazının Ana Mesajı:

• React === kullanmaz, Object.is kullanır.
• Bu sayede NaN gibi hatalardan kaçınır.
• Objelerde içeriğe değil, referansa (adrese) bakar. Bu yüzden her zaman [...spread] ile yeni bir kopya oluşturmalıyız.

Sadece const [value, setValue] = useState() demekle yetinmeyelim; gelin bu işin mutfağına, Fiber Tree ve Memory Management tarafına bakalım.

1. Hooks Dispatcher ve Mount vs. Update

React, bir hook’un ilk kez mi çağrıldığını yoksa bir güncelleme mi olduğunu nasıl anlıyor? Arkada aslında iki farklı nesne çalışır: HooksDispatcherOnMount ve HooksDispatcherOnUpdate.

• Mount anında: React, hook’u bağlı liste (linked list) yapısına ekler.
• Update anında: React, mevcut listeyi “reconcile” eder (uzlaştırır).

Trick: Hook’ların neden if veya for içinde kullanılamadığının gerçek sebebi budur. Linked list sırasının bozulmaması gerekir!

2. State Batching (Otomatik Gruplandırma)

React 18 ile gelen en büyük özelliklerden biri Automatic Batching. Eskiden sadece React event’lerinde çalışan bu özellik artık setTimeout, promises ve native events içinde de çalışıyor.

3. Lazy Initial State (Performans Canavarı)

Eğer useState içine doğrudan ağır bir işlem (örneğin localStorage okuma veya büyük bir array filtreleme) yazarsan, bu işlem her render'da tekrar çalışır.

• Yanlış: useState(heavyComputation())
• Doğru: useState(() => heavyComputation())

Bu sayede fonksiyon sadece mount anında bir kez çalışır. Buna “Lazy Initialization” denir.

4. Bailing Out of a State Update (Object.is)

React, yeni state’in eskisiyle aynı olup olmadığını kontrol etmek için Object.is algoritmasını kullanır. Eğer değer değişmemişse React, render işlemini yarıda keser (Bail out).

• Kritik Bilgi: Eğer bir objenin içindeki değeri değiştirip referansını değiştirmezsen (mutation), React değişikliği algılamaz ve sayfa güncellenmez. İmmutability’nin teknik sebebi budur.

5. useState vs. useReducer: Ne Zaman Hangisi?

• useState: Birbirinden bağımsız state’ler için.
• useReducer: Bir state değiştiğinde başka bir state’in de değişmesi gerekiyorsa (complex state logic) veya state geçişleri belirli kurallara (action) bağlıysa.

6. TypeScript ile “Strict” State Yönetimi

Sadece number | null demek yerine, Discriminated Unions kullanarak state'in imkansız durumlara (impossible states) düşmesini engelleyebilirsin:

Bu yaklaşım, loading true iken aynı zamanda datanın var olması gibi mantık hatalarını kod yazarken engeller.