React'in useState hook'u, bir bileşenin durum değerini depolamak ve değişiklik olduğunda UI'ı güncellemek için yeniden render etmeyi kullanmak üzere kullanılır.
useState, tüm bileşeni yeniden render eder ancak sanal DOM'u kullanarak gerçek DOM değişikliklerini en aza indirir.
useState'in içsel uygulaması, bağlı liste tabanlıdır ve şu anda render edilen bileşeni ve hook'u bağlayarak durum değerini korur ve güncelleme olaylarına bağlı olarak farklı işlevleri çağırır.
React çevresinde garip bir şekilde 'use' ile başlayan isimleri kullanmayı çok seviyorlar.
useServer, useCallback, useState, useMemo gibi.
Özel hook'lar da 'use' ile başlıyor.
Bu nereden çıktı acaba?
useState, bilinen bir hook'tur.
Durum değerlerini saklar ve değiştiğinde yeniden render eder. Çok basit.
Herkesin bildiği o örnek.
Durum değeri değiştiğinde yeniden render ediliyor dedik, peki yeniden render edilen kapsam ne oluyor?
Sadece p etiketi mi? Yoksa button etiketi de mi?
Cevap, useState'in çağrıldığı bileşen tümüdür.
ExampleComponent yeniden render ediliyor ancak
Sanal DOM'u kullanarak değerleri karşılaştırarak yalnızca farklı yerleri DOM'da güncelliyor.
useState her render'da çağrılıyor, peki değer nasıl korunuyor?
Bu, useState'in yapısından kaynaklanıyor.
Yukarıdaki kod, React'in gerçek useState kodudur.
Global nesneden dispatcher'ı alıp useState'i tetikliyor.
Buradan yapı anlaşılmıyor.
Daha derine inersek, şu kod karşımıza çıkıyor.
Hook'u alıp, set fonksiyonunu doğrudan hook'un içindeki kuyruğa (queue) bağlayarak veriyor.
(bind, mevcut fonksiyonun this'ini bağlar ve kalan parametreleri ilgili fonksiyonun parametreleri olarak kullanır, ardından this'i bağlanmış yeni bir fonksiyon döndürür)
Buradan da nedenini anlamak zor.
Biraz daha bakalım.
Her seferinde başlangıç değerini (init) atadığını görüyoruz. Bu durumda state'in nasıl korunduğu açıklanamıyor.
Biraz daha bakalım. hook biraz şüpheli görünüyor.
currentlyRenderingFiber ve workInProgressHook global değişkenlerdir.
Sağdan sola atama yaparak bağlı liste (linked list) uygulamışlar.
Bu nedenle, hook'u açarsak, aşağıdaki yapı bekleniyor.
Başa değer eklemeye devam eden bir yapı.
Hala açıklayıcı değil, farklı bir useState uygulamasına baktım.
Hepsi mountState'i çağırmak yerine, yeniden render olduğunda updateState, rerenderState'i çağırıyormuş.
Yani yapı yukarıdaki gibi ve olaya göre farklı fonksiyonlar çağrılıyor.
Kodu doğrudan görmek isterseniz react/packages/react-reconciler/src/ReactFiberHooks.js dosyasına bakabilirsiniz.