useSyncExternalStore API'si ve Parametreleri

useSyncExternalStore en fazla üç parametre alır: abone olma, getSnapshot ve isteğe bağlı getServerSnapshot. Bunlar birlikte React'e değişiklikleri nasıl dinleyeceğini ve geçerli değeri nasıl okuyacağını bildirir.

Her parametreyi anlamak çok önemlidir; çünkü bunlardaki küçük hatalar bu kancayı kullanırken karşılaşılan hataların en yaygın kaynağıdır.

Abone olma işlevi React'ten bir geri çağırma alır ve bu geri çağırmayı durum deposuna kaydetmelidir; böylece durum deposu her değiştiğinde geri çağırma çalışır. React'in temizlik sırasında çağırdığı bir abonelikten çıkma işlevi döndürmelidir.

React, anlık görüntüyü ne zaman yeniden okuyacağını bunu kullanarak bilir; dolayısıyla abone olma işlevi yalnızca değişiklik bildirimini bağlama ve bağlantısını kaldırma işinden sorumludur.

getSnapshot, durum deposunun geçerli değerini döndürür. React, durumu okumak için oluşturma sırasında, değerin değişip değişmediğini belirlemek için de bildirimlerden sonra bu işlevi çağırır.

En önemlisi, temel veriler değişmediğinde referans açısından kararlı bir sonuç döndürmelidir; her seferinde yeni bir nesne oluşturmak yerine aynı referansı döndürmelidir.

İsteğe bağlı getServerSnapshot, sunucu taraflı oluşturma ve ilk hidrasyon aşaması sırasında kullanılan değeri sağlar. Bu işlevin bulunmasının nedeni, yalnızca tarayıcıda çalışan getSnapshot'un sunucuda bulunmayan API'lere dayanabilmesidir.

Bu işlevi sağlamak, sunucuya istemcinin başlangıçta oluşturacağı değerle eşleşen makul bir değer sunarak hidrasyon uyuşmazlıklarını önler.

Kanca, geçerli anlık görüntü değerini döndürür; bu değeri bileşeninizde diğer tüm durum parçaları gibi doğrudan kullanırsınız. Durum deposu değiştiğinde React yeniden oluşturur ve kanca güncellenmiş anlık görüntüyü döndürür.

Bileşen açısından bu, doğruluk kaynağı tamamen React'in dışında bulunsa bile reaktif durumu okumak gibi görünür.

getSnapshot senkron çalışmalı ve yalnızca geçerli durum deposu durumundan türetilen bir değer döndürmelidir. Asenkron iş yapmamalı veya aynı temel veriler için farklı sonuçlar üretmemelidir.

React, bu işlevi tekrar tekrar çağırıp sonuçları karşılaştırmaya dayanır; bu nedenle içindeki belirlenimsel olmayan davranışlar veya yan etkiler hatalı davranışlara yol açabilir.

Değişmez durum tutan durum depolarında getSnapshot kullanımı kolaydır; çünkü geçerli durum nesnesinin referansı yalnızca veriler değiştiğinde değişir. Bu referansı döndürmek, kararlı karşılaştırmaları kendiliğinden sağlar.

Değişmez güncelleme desenlerinin kancayla bu kadar iyi eşleşmesinin nedeni budur: eşit veri, eşit bir referans anlamına gelir ve React gereksiz yeniden oluşturmaları atlar.

Sık karşılaşılan bir hata, örneğin içinde eşleme veya filtreleme yapmak gibi, getSnapshot'un her çağrıda yepyeni bir nesne ya da dizi döndürmesidir. React her seferinde yeni bir referans görür ve değerin değiştiğini düşünür.

Bu durum sonsuz yeniden oluşturmalara veya uyarılara yol açar. Çözüm, türetilmiş değeri önbelleğe almak ve kaynak veriler gerçekten değişene kadar aynı referansı döndürmektir.

Döngüyü önlemek için türetilmiş verileri getSnapshot'un dışında hesaplayın veya işlevin önbelleğe alınmış bir referans döndürmesi için bunları anımsayın. Birçok kütüphanenin kullandığı seçici tarzı desen, tam olarak bu kararlılığı yönetmek için vardır.

Temel kural şudur: durum deposu verileri değişmemişken getSnapshot'a yapılan iki çağrı tamamen aynı referansı döndürmelidir.

Pratikte bir dinleyici ekleyip kaldıran bir abone olma işlevi, kararlı bir geçerli değeri okuyan bir getSnapshot ve SSR için sunucuda güvenle kullanılabilecek bir değer döndüren bir getServerSnapshot yazarsınız.

Bu üçü doğru olduğunda kanca, harici durum deponuzun tutarlı ve eşzamanlı çalışmada güvenli biçimde okunmasını çok az ek kodla sağlar.

getSnapshot'un görevini belirleyin.

Kanca; abone olma, getSnapshot ve isteğe bağlı olarak getServerSnapshot alır. Abone olma işlevi bir dinleyiciyi bağlar ve abonelikten çıkma işlevi döndürür; getSnapshot geçerli değeri senkron biçimde okur ve referans açısından kararlı olmalıdır; getServerSnapshot SSR için güvenli bir değer sağlar.

Klasik tuzak, her çağrıda yeni bir nesne döndürmektir; bu sonsuz döngülere neden olur. Türetilmiş değerleri önbelleğe alın; böylece değişmemiş veriler aynı referansı üretir.