KÜTÜPHANE ANALIZI
React v18.0 — Yenilik ve Güncellemeler
Bu yazı ile 29 Mart 2022 React v18.0 ile duyurulan yenilikler üzerinde duracağım.
Bu yazı aslında daha önceden yazmış olduğum React Nedir ? yazısına bir eklenti olarak düşünebilirsiniz. React Nedir yazısı daha çok API üzerinden bir anlatım olduğu için bu yazıda ona benzer şekilde API incelemesi olacak.
Bu konuda referans aldığımız doküman React Takımı tarafından yazılmış aşağıdaki blog yazısı olacak.
React 18 Upgrade Guide içerisinde Client API ile ilgili değişiklikleri daha net görebiliyoruz.
ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
ReactDOM.render her uygulamanın başlangıncında kullandığımız bir yapıyken buradan ReactDOM.createRoot oluşturup bunun üzerinden render edilebilir yapılara dönüşmüş.
Bu yapı bizim React.createPortal olduğu gibi farklı amaçlar doğrultusunda rootlar oluşturmamızı ve bu rootları eş zamanları renderer ile daha optimize şekilde yönetebilmemizi sağlar.
Not: React Portal kavramının nasıl çalıştığını bu yazıda anlatmıştım.
Eğer ServerSide Rendering kullanıyorsanız render kelimesinin yerini hdyrate alıyor
Yukarıdakı Root yapısına bağlı olarak
- unmount
- render callback
Server Rendering API üzerindeki Değişiklikler
Bu sürüm ile birlikte Sunucuda Streaming SSR ve Suspense yapılarını tam olarak destekleyecek ReactDOM/server API gelerek önceki desteklemeyen apiler deprecated hale gelmiş..
Yazmış olduğum Web Rendering — Updated blog yazısını okuyabilirsiniz. Veya aşağıdaki Rendering Patterns konuşmayı dinleyebilirsiniz
Bu yapı ile birlikte Streaming ve Suspense alanında aşağıdaki API’lerde bir takım güncellemeler gerçekleşti.
renderToNodeStream: Deprecated ⛔️️
renderToPipeableStream: New ✨
renderToReadableStream: New ✨
renderToString: Limited ⚠️
renderToStaticMarkup: Limited ⚠️
renderToStaticNodeStream
TypeScript Tanımlamalarında Güncellemeler
@types/react ve @types/react-dom veri yapılarında güncellemeler olmuş durumda , yeni versiyonla birlikte bu kısımlarda güncellemeler gerekiyor.
Automatic Batching
setState sonrasında Hook’lar ile birlikte useState her variable değiştirme işlemi gerçekleşti. Bu işlemler ayrı ayrı fonksiyon çağırması olduğu için
- eventHandlers içerisinde → handleClick içerisinde batch şeklinde yani tek bir render yaparak yapılabilirken
- promises, setTimeout, native event handlers, veya diğer event yapıları → batch güncellemeleri desteklemiyor idi. React 18 ile birlikte bu işlemleri batch şeklinde yapabilme
Aynı zamanda flushSync komutuyla batch rendering tetiklemesini daha kontrol altında yapabilmenizi sağlıyor.
Kütüphaneye Eklenenen Yeni API’ler
Concurrent Rendering API için eklenen aşağıdaki API’ler ekranda çok fazla parçaçık ve element olduğunda bunların daha performanslı bir biçimde paralel işlenerek ekranın kilitlenmesini engelleyecek API’ler sunuyor.
- startTransition
- useDefferedValue
- useId
startTransition konusunda Swizec Teller fractal ile oluşturulmuş iç içe çok fazla kareninin React 18 öncesinde ve React 18 ile nasıl çizdirildiğini anlatıyor.
Özellikle Cografi Bilgi Sistemleri ve üzerinde binlerce kare çizilen animasyonlu ekranlarda React 18 bu performansı web uygulamalarında büyük bir avantaj sağlayacaktır.
Hooks yeni API olarak
- useSyncExternalStore: External(Dış Store) eş zamanlı erişim destekleyecek Hook desteği
- useInsertionEffect : CSS-in-JS kütüphanelerindeki performans problemlerini giderecek render operasyonu sırasında style inject etmeyi sağlayan Hook desteği
Strict Mode İle İlgili Güncellemeler
Bir bileşenden diğer bileşene geçişlerde mount/unmount sürecini daha detaylı yönetmenizi sağlayacak.
Örneğin tablar arası geçiş, sırasında önceki bileşene geçiş sırasında daha iyi kaliteli efektler oluşturmasını olanak sağlar.
Test Ortamında Güncellemeler
createRoot gelişiminden dolayı bir takım uyarı mesajları aşağıdaki kod ile düzeltebilirsiniz.
IE Artık Deskteklemiyor.
Microsoft Edge tarayıcıya geçmesi, IE’nin yeni nesil tarayıcı özelliklerine sahip olmaması nedeniyle React IE artık desteklemiyor.
React is dropping support for Internet Explorer
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (Ürün ve Kütüphaneler) erişmek için bu linke tıklayabilirsiniz.