React — Haziran 2022 güncellemeleri

Bildiğiniz gibi React ekibi 18 sürümü üzerinde çalışıyor. 15 haziran tarihinde React’in gelmiş olduğu son durumu bir yazı ile güncelleme geçtiler (https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html).

Bu yazımda da güncellemeden edindiğim notları sizlerle paylaşacağım.

Server Components

• 2020 Aralıktaki deneysel bir demo yapmışlardı ve ben de bu güncellemeleri devnot kanalında aktarmıştım: https://www.youtube.com/watch?v=X-_0ACXSE9I&t=2726s

• O günden beri gelen feedbackler üzerinde çalışıyorlar.
• react-fetch yerine async/await modeli entegre etmeye geçmişler.

react-fetch kütüphanesi, bileşeninizi sarmalayarak gelen REST API sonucunu prop olarak inject etmenizi sağlıyor. Bence React mantığına ters bir yöntemdi, kaldırılması güzel olmuş.

• .client.ts .server.ts gibi file extension temelli yaklaşımdan vazgeçip, annotating boundaries modeline geçmişler.

annotating boundaries sayesinde client ve server kısmı react/server şeklinde import edilerek sağlanıyor. https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278

• Webpack ve Vite’ta aynı semantik yaklaşımın korunması için Vercel ve Shopify ile çalışıyorlar. Yayına almadan önce server component’lerin semantiklerinin tüm React ekosistemi içinde aynı şekilde kullanılacağından emin olmak istiyorlar. Stabil olmadaki en büyük engel buymuş.

Vue ekibinden Evan You’nun geliştirdiği Vite, aynı webpack gibi bir bundler sayesinde uygulamanızı paketlemenizi ve diğer tüm süreçleri basitçe yapmanızı sağlıyor. https://vitejs.dev

Asset yükleme

• Scriptler, harici stiller, fontlar ve görseller olarak gruplandırdığımız assetler, webpack gibi harici sistemler kullanılarak preload ediliyor ve yükleniyor. Bu durum, streaming ve RSC gibi yeni alanlardaki koordinasyonu zorlaştırıyor. Tüm ortamlarda çalışabilecek React API’leri ekleyerek bu harici assetleri preload edip tekilleştirmek istiyorlar.

preload webpack plugini import edilen ifadeleri sayfa içerisine rel olarak ekliyor. https://www.npmjs.com/package/preload-webpack-plugin

• Ayrıca üretilecek API’nin Suspense’e destek vermesi isteniyor. Böylece image, CSS, ve fontlar yüklenene dek arayüzdeki bileşeni bloklayacak, ancak streaming ve concurrent rendering asamalarinda bloklamayacak. Bu sayede “popcorning” denilen görsellerin patlayarak ortaya çıkması ve layout’ta oluşan kaymaları engellenecek.

SSR Optimizasyonlari

• Cache’lenebilir sayfalar için Static Site Generation (SSG) ve Incremental Static Regeneration (ISR) iyi bir çözüm oldugunu biliyoruz ancak dinamik SSR tarafında, özellikle de tamamen cache’lenebilemeyen içeriklerdeki performansi arttirmak icin özellikler eklememiz gerektigini dusunuyoruz demişler. Bunu da derleme ve static passing kullanarak yapmayı amaçlıyorlar.

CSR, SSR, SSG ve ISR arasındaki farkları buradan görebilirsiniz: https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea

React Optimizing Compiler

• 2021 React Conf’ta React Forget’i tanıtmışlardı. https://www.youtube.com/watch?v=lGEMwh32soc
• Bu compiler otomatik olarak bileşeni useMemo ve useCallback ile çevreliyor ve böylece tekrar render etme işlemlerini minimize ediyor.
• Son günlerde React Forget’i tekrar yazmişlar ve daha güvenilir ve yetenekli hale getirmişler. Bu sayede local mutation’lar gibi daha karmaşik örüntüleri memoize edebilecek.

Bir local mutation örneği. TeaGathering component’i aynı zamanda bir fonksiyon olup, kendi içinde array oluşturarak doldurmaktadır. Fonksiyon dışındaki bir yere erişseydi local mutation olmayacaktı.

• Ayrıca compiler’ın farklı kısımlarını keşfetmek için bir playground üzerinde çalışıyorlar. Böylece React Forget compiler’ının nasıl çalıştığını daha kolay anlayabileceğiz. Hatta live render gibi özellikler gelecek ve component içini kodladıkça output’unu anlık görebileceğiz.

Offscreen

• Web geliştiriminde ekranda herhangi bir div’i göster/gizle yaparken yaptığımız yöntemlerden biri DOM’dan çıkarma/ekleme, diğeri ise CSS ile display: none olarak atama şeklinde gerçekleşmektedir.
• DOM’a ekleme çıkarma işlemlerinde, her unmount esnasında arayüzün state’i resetlenmektedir. Ayrıca DOM içerisinde scroll pozisyonu gibi state’ler de buna dahildir.
• CSS ile display:none; ederken ise React, gizlenen bileşeni render etmeye devam etmesi gereklidir ve yeni state güncellemelerini işlemesi gereklidir.
• <Offscreen> sayesinde UI görsel olarak gizlenip içeriği deprioritize edilebilmektedir. CSS’deki content-visibility gibi çalışmaktadır. Yani içerik gizli iken UI ile senkronize olmasına gerek yoktur.
• Offscreen aslında gelişmiş özellikleri açabilecek küçük bir yetenektir. startTransition gibi diger concurrent özelliklere benzer şekilde Offscreen API’si ile direkt uğrasmayacağız ancak React üstüne kurulmuş Remix gibi opiniated bir framework aşağıdaki bazı işlemleri bizim için halledecektir:
• instant transitions: Remixjs gibi bazı framework’ler hover işleminde sonraki sayfayi prefetch edebilmektedir. <OffScreen> sayesinde sonraki sayfayı prerender edebileceklerdir.
• reusable state: Tab aralarında gezerken onceki ekranın state’i korunacak ve arayüzde kaldığın yerden devam edebileceksiniz.
• virtualized list: Virtualized list frameworkleri, ekranda mevcut görünen alandan daha fazla item’i render etmektedir. Offscreen ile, görünmeyen satırlar daha düşük priority’e sahip şekilde render edilecektir

Virtualized list çalışma mantığı: https://web.dev/virtualize-long-lists-react-window/

• backgrounded content: Ayrıca modal overlay görüntülerken olduğu gibi modal’ı gizlemeden deprioritize edecek bir özellik planlanıyor.

Transition tracing

• Halihazirdaki react profiler, component’lerin render edilirken ne kadar hızlı/yavaş edildiğini gösteriyordu. Ancak React’in o zaman içerisinde ne yaptığını söylemiyordu.

Halihazırdaki React profiler.

• Yeni profiler’da component’lerin state güncellemelerini ne zaman schedule ettiği ve ne zaman React’in güncellemeleri gercekleştirdiğini gösteriyor. Ayrıca, o an neler olduguna dair kategorizasyon ve öncelliklendirme de yapiyor.
• Bu sayede yavaş state commit’lerinin nedeni bulunabilecek. Geliştiriciler bir buton tıklaması, bileşenin başlangıçtaki yüklemesi veya sayfalar arası geçişler gibi spesifik etkileşimleri izleyerek neyin yavaşlığa neden olduğunu görebilecekler.

Mount esnasında Suspend işlemi: https://github.com/reactwg/react-18/discussions/76

• Daha önceden Interaction Tracing API eklemişlerdi ama bazı temel tasarım açıkları sonrası kaldırdılar. Şimdi yeni bir Interaction Tracing API (Transition Tracing çünkü startTransition ile başlatiliyor) üzerinde çalışıyorlar.

Yeni React Docs

• Gecen sene React Docs sitesinin betasını yayınlamışlardı. Eskinin aksine yenisinde daha çok hook öncelikli ve yeni diyagramlar var. Ayrıca etkileşimli örnekler var (Microsoft’tan gelen Rachel Nabors’tan dolayi olduğunu düşünüyorum).
• React 18'i yayinlamak için doküman geliştirimine ara vermişlerdi. Şimdi 18 çıktığı için aktif olarak çalışıp dokümantasyonu yetiştirmeye çalışıyorlar.
• Effect’lerle ilgili detayli bir yazilari var. Bu yaziyi yazarken fark ediyorlar ki birçok yaygın effect pattern’ları, yeni primitive hook’lar eklenerek basitleştirilebilir. Bu nedenle useEvent RFC’sini yayımladılar.

Sonuç olarak

React cephesinde oldukça büyük gelişmeler olmaya devam ediyor. Belki de geleceğin web geliştirme ortamı React olur kim bilir :)

Bu yazımda eksik/hatalı olduğunu düşündüğünüz kısımlar varsa bana ulaşabilirsiniz. Sonraki yazımda tekrargörüşmek üzere…