Eşzamanlı Mod'u Benimsemek (Deneysel)

• Yükleme

  • Bu Deneysel Sürüm Kimin İçin?
  • Eşzamanlı Modu Etkinleştirmek

• Beklenmesi Gerekenler

  • Geçiş Adımı: Engelleme Modu
  • Neden Bu Kadar Çok Mod Var?
  • Özellik Karşılaştırması

Yükleme

Eşzamanlı mod sadece React’in deneysel versiyonlarında bulunmaktadır. Onları yüklemek için, şu komutu çalıştırın:

npm install react@experimental react-dom@experimental

Deneysel versiyonlar için mantıksal versiyonlamanın garantisi yoktur. Herhangi bir @experimental sürümde API’lar eklenebilir, değişebilir veya kaldırılabilir.

Deneysel versiyonlar sıkça bozucu değişimler içerirler.

Bu sürümleri kişisel projelerinizde veya bir branch üzerinde deneyebilirsiniz, ancak canlıda kullanılmasını tavsiye etmeyiz. Biz Facebook’ta onları canlıda kullanıyoruz, ama bunun nedeni eğer bir şey bozulursa bugları düzeltmek için bizim varolmamız. Sizi uyardık!

Bu Deneysel Sürüm Kimin İçin?

Bu sürüm öncelikli olarak erken benimseyenler, kütüphane sahipleri ve meraklı insanlar içindir.

Biz bu kodu canlıda kullanıyoruz (ve işimizi görüyor) ancak hala kimi buglar, eksik özellikler ve dokümantasyonda boşluklar var. Gelecekte yayınlanacak olan kararlı sürüme daha iyi hazırlanabilmek için eşzamanlı modda nelerin çalışmadığı konusunda bilgiye toplamak istiyoruz.

Eşzamanlı Modu Etkinleştirmek

Normalde React’e bir özellik eklediğimizde onu hemen kullanmaya başlayabilirsiniz. Fragment, Context ve hatta Hooks böyle özelliklere bir örnek. Bunları eski kodda herhangi bir değişiklik yapmadan yeni kodda kulanabilirsiniz.

Eşzamanlı mod ise farklı. React’in nasıl çalıştığı konusunda mantıksal değişiklikler ekliyor. Aksi takdirde onun etkinleştirdiği yeni özellikler mümkün olamazdı. Bu yüzden izole bir şekilde teker teker yayınlanmak yerine yeni bir “mod” altında gruplandırıldılar.

Eşzamanlı modu sadece belli alt ağaçlarda kullanamazsınız. Onun yerine bugün ReactDOM.render() metodunu çağırdığınız yerde kullanmanız gerekiyor.

Bu tüm <App /> ağacı için eşzamanlı modu etkinleştirir:

import ReactDOM from 'react-dom';

// Eğer eskiden
//
// ReactDOM.render(<App />, document.getElementById('root'));
//
// kullanıyorduysanız, eşzamanlı modu şunu yazarak etkinleştirebilirsiniz:

ReactDOM.unstable_createRoot(
  document.getElementById('root')
).render(<App />);

Not:

createRoot gibi eşzamanlı mod APIları React’in sadece deneysel versiyonlarında bulunmaktadır.

Eşzamanlı modda daha önce “güvensiz” olarak işaretlenmiş yaşam döngüsü metotları bu sefer gerçekten güvensizdir ve bugünkü React’ten dahi daha çok hataya sebep olurlar. Uygulamanızın Strict Mode desteği olana dek eşzamanlı modu kullanmanızı önermiyoruz.

Beklenmesi Gerekenler

Eğer büyük bir uygulamanız varsa veya uygulamanızın çok fazla üçüncü parti paketlere bağımlılığı varsa, lütfen eşzamanlı modu anında kullanabileceğiziniz düşünmeyin. Örneğin biz Facebook’ta eşzamanlı modu yeni sitede kullanıyoruz ama eski sitede kullanmayı planlamıyoruz. Bunun nedeni, eski sitemizin hala güvensiz yaşam döngüsü metotlarını, uyumsuz üçüncü parti kütüphanelerini ve eşzamanlı modla çok iyi çalışmayan desenleri canlı kodda kullanıyor olması.

Bizim tecrübemiz, deyimsel React desenlerini kullanan ve harici state yönetimi çözümlerine bel bağlamayan kodun eşzamanlı modu çalıştırmada en kolay olduğu yönünde. Gördüğümüz ortak sorunları ve onların çözümlerini önümüzdeki haftalarda ayrıca anlatacağız.

Geçiş Adımı: Engelleme Modu

Eski kodlar için eşzamanlı mod biraz ileri gidiyor olabilir. Bu yüzden de deneysel React versiyonunda yeni “engelleme modu”nu sunuyoruz. createRoot yerine createBlockingRoot deneyebilirsiniz. Bu, eşzamanlı mod özelliklerinin sadece küçük bir kısmını sunar, ama React’in bugünkü çalışmasına yakındır ve bir geçiş adımı olarak kullanılabilir.

Toplamak gerekirse:

• Miras modu: ReactDOM.render(<App />, rootNode). Bu, React uygulamalarının bugün kullandığı moddur. Gözlemlenebilir gelecekte miras modunu kaldırma planı yok - ama bu yeni özellikler de bu modla kullanılamayacak.
• Engelleme Modu: ReactDOM.createBlockingRoot(rootNode).render(<App />). Bu, şu anda deneysel. Eşzamanlı modun özelliklerinin bir alt kümesini kullanmak isteyen uygulamalar için bir geçiş adımı olarak düşünüldü.
• Eşzamanlı mod: ReactDOM.createRoot(rootNode).render(<App />). Bu, şu anda deneysel. Gelecekte, kararlılığa ulaştıktan sonra onu öntanımlı React modu yapmayı istiyoruz. Bu, yeni özelliklerin tamamını etkinleştiriyor.

Neden Bu Kadar Çok Mod Var?

Biz, çok büyük ve bozucu değişiklikler yapmak yerine kademeli geçiş stratejisi sunmanın - veya React’in gereksizliğe doğru durulmasının - daha iyi olduğunu düşünüyoruz.

Pratikte miras modunu kullanan uygulamaların çoğunun en azından engelleme moduna (hatta eşzamanlı moda) geçişi mümkün olmalı. Bu parçalanma, tüm modları desteklemeyi hedefleyen kütüphaneler için kısa vadede can sıkıcı olabilir. Ancak, ekosistemi miras modundan kademeli olarak uzaklaşmak aynı zamanda React ekosistemindeki büyük kütüphaneleri etkileyen layoutu okurken kafa karıştıran Suspense davranışı ve tutarlı harmanlama garantisinin olmayışı gibi sorunları da çözecektir. Miras modunda bulunan kimi hatalar mantıksal değişiklikler yapılmadan çözülemiyor ama engelleme modunda ve eşzamanlı modda bulunmuyor.

Engelleme modunu, eşzamanlı modun “zarifçe indirgenmiş” bir versiyonu olarak düşünebilirsiniz. Sonuç olarak, uzun vadede birleştirebileceğiz ve farklı modları düşünmeyi komple bırakabileceğız. Ama şimdilik modlar önemli bir geçiş stratejisi. Geçiş yapmaya değip değmeyeceğine herkesin kendinin karar vermesine ve kendi hızlarıyla yükseltmelerine izin veriyorlar.

Özellik Karşılaştırması

*: Miras modunun React tarafından yönetilen olaylarda otomatik kümelemesi var ama sadece tek tarayıcı göreviyle sınırlı. React dışı olaylar unstable_batchedUpdates kullanarak katılmak zorunda. Engelleme modunda ve eşzamanlı modda tüm setStateler öntanımlı olarak kümeleniyor.

**: Geliştirmede uyarı verir.