Harici Mağaza Aboneliklerindeki Sorun

Harici durum deposu, Redux deposu, matchMedia gibi bir tarayıcı API'si veya kendi abone olma mekanizmasına sahip düz bir modül düzeyindeki nesne gibi React ağacının dışında bulunan herhangi bir durum kaynağıdır.

React bu durumun sahibi değildir; bu nedenle bileşenleri deponun o anda tuttuğu değerle eşzamanlı tutmak için değişikliklere abone olması ve anlık görüntüleri okuması gerekir.

Yaygın bir yaklaşım, depo değerini useState içine okumak ve ardından depo her değiştiğinde abone olup setState çağırmak için useEffect kullanmaktır. İlk bakışta bu, bileşeni güncel tutuyor gibi görünür.

Bu yaklaşım basit, eşzamanlı oluşturma için işe yarar; ancak React eşzamanlı olarak oluşturma yapıp çalışmayı ortasında duraklatabildiğinde veya yeniden başlatabildiğinde ortaya çıkan ince bir kusura sahiptir.

Yırtılma, tek bir oluşturma geçişi sırasında kullanıcı arayüzünün farklı bölümlerinin aynı depoya ait farklı değerleri göstermesiyle oluşur. Eşzamanlı oluşturma çalışmayı kesip sürdürebilir ve bu sırada depo değişebilir.

Sonuç, bir bileşenin eski değeri, diğerinin yeni değeri gösterdiği tutarsız bir ekrandır; eşzamanlı özelliklerden önce bu tür bir tutarsızlık fiilen mümkün değildi.

React eşzamanlı olarak oluşturma yaparken birçok bileşenin tema deposunu okuduğunu düşünün. Kullanıcı işlemin ortasında koyu modu açarsa, geçişten önce oluşturulan bileşenler açık temayı, geçişten sonra oluşturulanlar ise koyu temayı gösterir.

Bir oluşturma sırasında depo değeri değiştiği ve React bunu atomik olarak ele almadığı için bir kare boyunca yarı açık, yarı koyu bir ekran elde edersiniz.

Yan etkiler, oluşturma işlemi uygulanıp tamamlandıktan sonra çalışır; bu nedenle useEffect tabanlı bir abonelik, oluşturma sırasında okunan değerin uygulama anında depodaki değerle eşleşmesini garanti edemez. Abonelik, tutarsız bir görüntüyü önlemek için çok geç çalışır.

Yan etki yeniden abone olup durumu güncellediğinde, tutarsız kare kullanıcıya zaten gösterilmiş olabilir.

useMutableSource adlı daha önceki deneysel bir API, eşzamanlı oluşturma sırasında güvenli harici okuma sorununu çözmeye çalıştı; ancak API'nin doğru kullanılması zor oldu ve kararlı olarak hiç yayımlanmadı.

React ekibi, aynı tutarlılık güvencelerini keskin kenarlar olmadan sağlayan daha basit ve kullanımı daha rahat bir temel yapı taşıyla bunun yerini aldı.

useSyncExternalStore, harici depolara eşzamanlı oluşturmayla güvenli biçimde abone olmak için kullanılan resmî kancadır. React ile eşgüdümlü çalışarak okumaların bir oluşturma boyunca tutarlı kalmasını ve bileşenlerde yırtılma oluşmamasını sağlar.

Eşzamanlı oluşturma altında harici durumu React'e güvenilir biçimde bağlaması gereken kütüphane geliştiricileri için önerilen temel yapı taşı hâline gelmiştir.

Harici depolara abone olan durum kütüphaneleri, Redux, MobX ve Valtio da dâhil olmak üzere doğrudan etkilendi. Eşzamanlı özellikler kullanıma sunulduğunda güvenli kalabilmek için her birinin yeni temel yapı taşını benimsemesi gerekti.

Bu nedenle React bağlayıcıları, eski useState ile useEffect yaklaşımına güvenmek yerine dahili olarak useSyncExternalStore çağıracak şekilde güncellendi.

Kanca, oluşturma sırasında durumu okuyan her bileşenin aynı anlık görüntüyü görmesini garanti eder ve durum deposu aksi hâlde yırtılmaya neden olacak biçimde değişirse senkron bir yeniden oluşturmayı zorunlu kılar.

Tutarlı anlık görüntü ile eşzamanlı çalışmada güvenliğin bu birleşimi, kancanın elle yazılmış aboneliklere kıyasla sunduğu temel değerdir.

useSyncExternalStore kullanarak abonelikleriniz, React oluşturma modelini geliştirdikçe doğru kalır. Bu güvenceleri kusurlu biçimde yeniden uygulamak yerine çerçevenin güvencelerini kullanmayı seçersiniz.

Bu, herhangi bir harici doğruluk kaynağını React bileşenlerine bağlamanın kalıcı ve önerilen yolu olmasını sağlar.

Eşzamanlı oluşturmada yırtılmanın ne anlama geldiğini doğrulayın.

Harici durum depoları React'in dışında bulunur ve saf useState ile useEffect aboneliği, oluşturma eşzamanlı hâle geldiğinde yırtılmayı önleyemez. Etkiler, tek bir oluşturma sırasında okumaların tutarlı kalmasını sağlamak için çok geç çalışır.

useSyncExternalStore, kullanımdan kaldırılmış useMutableSource'un yerini alır ve eşzamanlı çalışmada güvenli, tutarlı bir anlık görüntü sağlar. Redux, MobX ve Valtio gibi kütüphaneler, durum deposu abonelikleri için geleceğe dayanıklı temel yapı olarak bunu benimsedi.