React’te 2 önemli değişiklik: View Transitions ve Activity

• React yeni deneysel özelliklerini duyurdu
  • View Transitions, akıcı sayfa geçiş animasyonlarını kolayca uygulamayı sağlıyor
  • Activity, UI’ı gizleyip durumu koruyarak performans optimizasyonunu mümkün kılıyor
• Bunların yanı sıra otomatik bağımlılık işleme, Fragment Refs, Concurrent Stores gibi çeşitli özellikler de geliştiriliyor

View Transitions’ın başlıca özellikleri

• Animasyonlar, yeni eklenen startViewTransition tarayıcı API’si kullanılarak uygulanıyor
• <ViewTransition> ile hangi öğelerin animasyonlu olacağı belirtiliyor; startTransition, useDeferredValue, Suspense gibi yapılar tetikleyici olarak kullanılabiliyor
• Varsayılan olarak crossfade animasyonu sunuluyor ve CSS ile özelleştirilebiliyor
• Paylaşılan öğe geçişleri (shared element transitions) de destekleniyor; aynı name özelliğine sahip öğeler arasında doğal geçişler yapılabiliyor
• Geçiş nedenine (cause) göre farklı animasyonlar tanımlamaya imkân veren addTransitionType API’si sunuluyor

Activity’nin başlıca özellikleri

• <Activity> ile UI gizlenip durum korunabiliyor veya gerekirse önceden render edilebiliyor
• Gizli modda bileşen unmount edilir, ancak durumu korunur ve render önceliği düşer
• Sayfalar arasında geçişte girilen değerler ya da durum kaybedilmeden geri yüklenebiliyor
• Gelecekte modallar için özel bir mod ve bellek tasarrufu için durumu kaldırma özelliği de eklenmesi planlanıyor
• Sunucu tarafı render (SSR) ortamında da Activity optimizasyon davranışını destekliyor

Geliştirilmekte olan diğer özellikler

• React Performance Tracks

  • Tarayıcı performans profiler’ına React’e özel özel izler ekleme özelliği geliştiriliyor
  • Performans ve Suspense bağlantısıyla ilgili sorunlar hâlâ çözülüyor

• Otomatik efekt bağımlılık işleme (Automatic Effect Dependencies)

  • React Compiler aracılığıyla useEffect bağımlılıklarını otomatik ekleyerek kodun sadeliğini ve anlaşılabilirliğini artırmak hedefleniyor
  • Bileşen yaşam döngüsü yerine Effect merkezli düşünmeyi teşvik etmeyi amaçlıyor

• Compiler IDE Extension

  • React Compiler tabanlı bir IDE eklentisi geliştiriliyor
  • Kod optimizasyonu, kural ihlali tespiti, otomatik eklenen bağımlılıkları gösterme gibi çeşitli özellikler sunması planlanıyor

• Fragment Refs

  • Birden fazla DOM öğesini tek bir Ref ile yönetmeyi sağlayacak Fragment Ref özelliği araştırılıyor
  • Amaç, DOM API çağrılarını daha kolay hâle getirmek

• Gesture Animations

  • View Transition’ı dokunma jesti tabanlı animasyonlara da genişletmeye yönelik araştırmalar sürüyor
  • Sürekli hareket, tamamlanmamış işlemleri ele alma, yeni DOM ile mevcut DOM arasındaki ters çevirme gibi sorunlar çözülmeye çalışılıyor

• Concurrent Stores

  • Harici store’ları React ile eşzamanlı (Concurrent) biçimde doğal olarak entegre etmek hedefleniyor
  • useSyncExternalStore sınırlamalarını aşan yeni bir use(store) tarzı API geliştiriliyor