React Öğrenmenin 5. Günü: Batching ve Fonksiyonel Güncellemeler

State setter fonksiyonunu birden fazla kez çağırmanın birden fazla render'a neden olduğunu sanıyordum.

Yanılmışım.

React bundan daha akıllı. Automatic Batching (Otomatik Gruplama) adı verilen bir işlem kullanıyor.

Her bir güncellemeden sonra render etmek yerine, React bunları bir araya getiriyor. Tüm güncellemeleri topluyor ve tek bir render işlemi gerçekleştiriyor. Bu, performanstan tasarruf sağlıyor.

Bugün öğrendiklerim şunlar:

The Batching Process Birden fazla state fonksiyonu çağırdığınızda, React şu akışı izler:

  • Birden fazla state güncellemesi gerçekleşir.
  • React bunları gruplar (batching).
  • React tek bir render işlemi yapar.
  • React değişiklikleri UI'a yansıtır (commit).

The Problem with Standard Updates Şu kodu denedim: setCount(count + 1); setCount(count + 1); setCount(count + 1);

Sayacın 0'dan 3'e çıkmasını bekliyordum. Ancak 0'dan 1'e çıktı.

Bunun sebebi, setCount(count + 1) ifadesinin "sayacı artır" anlamına gelmemesidir. Bunun yerine "sayacı bu belirli değere ayarla" anlamına gelir.

Eğer count 0 ise, her satır React'e sayacı 1 yapmasını söyler. React bunları gruplar ve son talimatın sayacı 1 yapmak olduğunu görür.

The Solution: Functional Updates Bunu düzeltmek için fonksiyonel bir güncelleme kullanmalısınız. Bu yöntem, güncelleme kuyruğunda (update queue) bulunan en güncel state'i kullanır.

Doğru yöntem: setCount((prev) => prev + 1);

Bu deseni kullandığınızda, React her güncellemeye en güncel değeri verir.

  • İlk güncelleme: 0 + 1 = 1
  • İkinci güncelleme: 1 + 1 = 2
  • Üçüncü güncelleme: 2 + 1 = 3

Artık sayaç gerçekten 3'e ulaşıyor.

A Common Mistake Bir keresinde şöyle yazmıştım: setCount((prev) => { prev + 1 });

Sayaç undefined oldu. Bir arrow function içinde süslü parantez kullanıyorsanız, return anahtar kelimesini kullanmalısınız. Bunun yerine şunu kullanın: setCount((prev) => prev + 1);

Key Takeaways:

  • React, hızı artırmak için birden fazla state güncellemesini gruplar.
  • setState çağrıları her zaman anında render tetiklemez.
  • Standart güncellemeler, mevcut render döngüsündeki değeri kullanır.
  • Fonksiyonel güncellemeler, güncelleme kuyruğundaki en güncel state'i kullanır.
  • React, bu değişiklikleri yönetmek için dahili bir Update Queue kullanır.

Source: https://dev.to/bismay-exe/day-5-of-learning-react-understanding-automatic-batching-functional-updates-397k