Photo by Bill Jelen on Unsplash

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.

Frontend Development With JS
4 min readMay 10, 2022

--

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üş.

render root

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

hdyrate root

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.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

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.

--

--