React 19

 (github.com/facebook)
2 puan yazan GN⁺ 2024-12-06 | 1 yorum | WhatsApp'ta paylaş

19.0.0 (5 Aralık 2024)

Yeni özellikler

React
  • Actions: startTransition artık asenkron fonksiyonları kabul edebiliyor. Bu fonksiyonlar "Actions" olarak adlandırılır; durumu arka planda günceller ve UI'ı tek seferde commit eder. Actions, asenkron istekler gibi yan etkiler gerçekleştirebilir ve Transition tamamlanmadan önce işlemin bitmesini bekler.
  • useActionState: Transition içinde Actions'ları sıralamaya ve duruma erişmeye olanak tanıyan yeni bir hook. Başlangıç durumu ve reducer kabul eder.
  • useOptimistic: Transition sürerken durumu güncelleyen yeni bir hook. Transition tamamlandığında durum yeni değerle güncellenir.
  • use: Render sırasında kaynakların okunmasını sağlayan yeni bir API. Promise veya Context kabul eder; bir Promise verilirse değer çözülene kadar askıya alınır.
  • ref'in prop olarak kullanımı: forwardRef gerekmeden ref, prop olarak kullanılabilir.
  • Suspense kardeşlerini önceden ısıtma: Bir bileşen askıya alındığında React, en yakın Suspense sınırının fallback'ini hemen commit eder.
React DOM istemcisi
  • <form> action prop'u: Form Actions, formları otomatik olarak yönetir ve useFormStatus ile entegre olur. Başarı durumunda formu otomatik olarak sıfırlar.
  • Belge meta verisi desteği: Belge meta verisi etiketleri bileşenlerden yerel olarak render edilebilir.
  • Stil sayfası desteği: Suspense sınırındaki içeriği göstermeden önce istemcinin <head> bölümüne stil sayfaları ekler.
  • Asenkron script desteği: Bileşen ağacının herhangi bir yerinde asenkron script'ler render edilebilir.
React DOM sunucusu
  • prerender ve prerenderToNodeStream API'leri eklendi: Statik site üretimi için API'lerdir; Node.js stream'leri ve web stream'leri gibi akış ortamlarında çalışacak şekilde tasarlanmıştır.
React Server Components
  • RSC özellikleri: Direktifler, server component'ler ve server function'lar kararlı hale geldi. Server component içeren kütüphaneler artık React 19'u peer dependency olarak hedefleyebilir.

Kullanımdan kaldırılacaklar

  • element.ref erişimi: element.props.ref tercih edilerek element.ref erişimi kullanımdan kaldırılıyor.
  • react-test-renderer: React 19'da react-test-renderer, kullanımdan kaldırma uyarısı kaydeder ve web kullanımı için concurrent rendering'e geçer.

Önemli değişiklikler

React
  • Yeni JSX dönüşümü zorunlu: Bundle boyutunu iyileştiren ve React'i import etmeden JSX kullanımını sağlayan yeni JSX dönüşümü artık gerekli.
  • Render hataları yeniden fırlatılmıyor: Hata bir Error Boundary tarafından yakalanmazsa window.reportError aracılığıyla raporlanır.
  • propTypes kaldırıldı: propTypes kullanımı sessizce yok sayılır. TypeScript'e geçiş önerilir.
  • Fonksiyonlarda defaultProps kaldırıldı: Bunun yerine ES6 varsayılan parametreleri kullanılabilir.
  • String ref'ler kaldırıldı: String ref kullanımı, ref callback'lerine taşınmalıdır.
React DOM
  • react-dom/test-utils kaldırıldı: act, react-dom/test-utils içinden react'a taşındı. Diğer yardımcılar kaldırıldı.
  • ReactDOM.render, ReactDOM.hydrate kaldırıldı: Concurrent rendering için ReactDOM.createRoot ve ReactDOM.hydrateRoot ile değiştirildi.

Dikkat çeken değişiklikler

React
  • Sağlayıcı olarak <Context> kullanımı: <Context.Provider> yerine sağlayıcı olarak <Context> render edilebilir.
  • Custom element desteği: React 19, tüm custom element testlerini geçer.
  • StrictMode değişiklikleri: useMemo ve useCallback, ilk render'ın memoization sonucunu yeniden kullanır.
React DOM
  • Hydration hatalarında fark gösterimi: Uyumsuzluk oluştuğunda React 19, uyumsuz içeriğin farklarını içeren tek bir hata kaydeder.

TypeScript değişiklikleri

  • Örtük return yasaklandı: ref'ler artık yalnızca cleanup function kabul eder. Örtük return hata oluşturur.
  • useRef için başlangıç argümanı gerekli: Başlangıç argümanı artık zorunlu.
  • Daha sıkı ReactElement tiplemesi: React element'lerinin props'ları artık varsayılan olarak any yerine unknown olur.

İlgili okumalar

1 yorum

 
GN⁺ 2024-12-06
Hacker News görüşleri

  • React kullanarak ölçeklenebilir uygulamalar geliştirmenin mümkün ve keyifli olduğunu düşünen yorumlar var

    • TS desteği ve topluluk kütüphaneleri sayesinde uygulamaları kolayca geliştirip ölçeklendirebildiklerini düşünüyorlar
    • Yeni özelliklerin insanları neden korkuttuğunu anlamıyorlar
    • Jetpack Compose ve Swift UI'ın React'ten ilham aldığı görüşü var
    • Geçmişte jQuery veya plain JS ile büyük ölçekli web uygulamaları geliştirmenin gerçekten keyifli olup olmadığı sorgulanıyor

  • React'in yeni sürümü hakkında olumlu görüşler var, ancak yeni başlayanlar için başlamanın zor olabileceğine dair endişeler de bulunuyor

    • React'in hâlâ mükemmel bir framework olduğu ve bu sürümün iyileştirmeler getirdiği düşünülüyor
    • Eleştirilerin React'in kendisinden çok genel olarak frontend geliştirmeye yönelik olduğu belirtiliyor

  • İstemci tarafı framework'lerinin karmaşıklığının arttığı görüşü var

    • Backend, frontend, DevOps stack'i ve diğer her yerde karmaşıklığın arttığı hissediliyor

  • Yeni sürümde ref as a prop özelliğinin eklenmesi ve böylece forwardRef ihtiyacının ortadan kalkması olumlu karşılanıyor

  • Redux yerine Recoil klonu olan Jotai'den bahsediliyor ve React 19 ile uyumlu olduğu belirtiliyor

    • Frontend karmaşıklığı nedeniyle başka bir state manager'ın engel olabileceği düşünülüyor

  • 'use' API'sinin adının değiştirilmesini isteyen görüşler var

    • React hooks ile ilk kez karşılaşanların kafasının karışabileceği düşünülüyor

  • Paralel Suspense sorununu çözmek için sürümün ertelenmesi olumlu değerlendiriliyor

  • Mevcut built-in hook'ları temel alarak useActionState hook'unun oluşturulup oluşturulamayacağı sorgulanıyor

  • Standart web teknolojilerinin kullanımını teşvik eden ve yaşam kalitesini artıran özelliklerin eklenmesi olumlu karşılanıyor

    • Suspense tetiklemenin hâlâ framework desteği gerektirmesi hayal kırıklığı yaratıyor
    • TanStack Query üzerinden Suspense mekanizmasını anlamaya çalıştıklarını ancak başarılı olamadıklarını belirtiyorlar