React 19

 (github.com/facebook)
2 poin oleh GN⁺ 2024-12-06 | 1 komentar | Bagikan ke WhatsApp

19.0.0 (5 Desember 2024)

Fitur baru

React
  • Actions: startTransition kini dapat menerima fungsi asinkron. Fungsi-fungsi ini disebut "Actions" dan memperbarui state di latar belakang serta melakukan commit UI sekaligus. Actions dapat menjalankan efek samping seperti permintaan asinkron, dan menunggu pekerjaan selesai sebelum Transition berakhir.
  • useActionState: Hook baru untuk mengurutkan Actions dan mengakses state di dalam Transition. Menerima state awal dan reducer.
  • useOptimistic: Hook baru untuk memperbarui state saat Transition sedang berlangsung. Ketika Transition selesai, state diperbarui ke nilai baru.
  • use: API baru untuk membaca resource saat rendering. Menerima Promise atau Context, dan jika Promise diberikan, akan melakukan suspend hingga nilainya terselesaikan.
  • Menggunakan ref sebagai prop: ref kini dapat digunakan sebagai prop tanpa memerlukan forwardRef.
  • Prewarming sibling Suspense: Saat komponen melakukan suspend, React segera melakukan commit fallback dari boundary Suspense terdekat.
React DOM client
  • Prop action pada <form>: Form Actions secara otomatis mengelola form dan terintegrasi dengan useFormStatus. Form juga otomatis di-reset saat berhasil.
  • Dukungan metadata dokumen: Tag metadata dokumen kini bisa dirender secara native dari komponen.
  • Dukungan stylesheet: Menyisipkan stylesheet ke <head> klien sebelum menampilkan konten dari boundary Suspense.
  • Dukungan script asinkron: Dapat merender script asinkron dari mana saja di dalam tree komponen.
React DOM server
  • Penambahan API prerender dan prerenderToNodeStream: API untuk pembuatan situs statis, dirancang agar bekerja di lingkungan streaming seperti stream Node.js dan web stream.
React server components
  • Fitur RSC: directives, server components, dan server functions kini telah stabil. Library yang menyertakan server components sekarang dapat menargetkan React 19 sebagai peer dependency.

Akan dihentikan

  • Akses element.ref: Akses element.ref dihentikan dan disarankan menggunakan element.props.ref.
  • react-test-renderer: Di React 19, react-test-renderer akan mencatat peringatan penghentian dan beralih ke concurrent rendering untuk penggunaan web.

Perubahan utama

React
  • Transformasi JSX baru wajib: Transformasi JSX baru diperlukan untuk meningkatkan ukuran bundle dan memungkinkan penggunaan JSX tanpa mengimpor React.
  • Error rendering tidak dilempar ulang: Jika error tidak ditangkap oleh Error Boundary, error akan dilaporkan ke window.reportError.
  • Penghapusan propTypes: Penggunaan propTypes akan diabaikan secara diam-diam. Migrasi ke TypeScript direkomendasikan.
  • Penghapusan defaultProps pada fungsi: Dapat menggunakan parameter default ES6 sebagai gantinya.
  • Penghapusan string refs: Penggunaan string refs harus dimigrasikan ke callback ref.
React DOM
  • Penghapusan react-dom/test-utils: act dipindahkan dari react-dom/test-utils ke react. Utility lainnya dihapus.
  • Penghapusan ReactDOM.render, ReactDOM.hydrate: Digantikan oleh ReactDOM.createRoot dan ReactDOM.hydrateRoot untuk concurrent rendering.

Perubahan yang patut diperhatikan

React
  • Menggunakan <Context> sebagai provider: Kini dapat merender <Context> sebagai provider alih-alih <Context.Provider>.
  • Dukungan custom element: React 19 lulus semua pengujian custom element.
  • Perubahan StrictMode: useMemo dan useCallback menggunakan kembali hasil memoization dari rendering pertama.
React DOM
  • Perbedaan untuk error hydration: Jika terjadi ketidakcocokan, React 19 mencatat satu error yang mencakup perbedaan pada konten yang tidak cocok.

Perubahan TypeScript

  • Larangan implicit return: refs kini hanya menerima fungsi cleanup. Implicit return akan memicu error.
  • Argumen awal useRef wajib: Argumen awal sekarang wajib.
  • Pengetikan ReactElement lebih ketat: props pada elemen React kini menggunakan default unknown alih-alih any.

Bacaan terkait

1 komentar

 
GN⁺ 2024-12-06
Opini Hacker News

  • Ada pendapat bahwa membangun aplikasi yang skalabel dengan React itu memungkinkan dan menyenangkan

    • Berkat dukungan TS dan library komunitas, aplikasi bisa dibangun dan diskalakan dengan mudah
    • Tidak memahami mengapa fitur-fitur baru membuat orang takut
    • Ada pendapat bahwa Jetpack Compose dan Swift UI terinspirasi dari React
    • Mempertanyakan apakah dulu membangun aplikasi web berskala besar dengan jQuery atau plain JS benar-benar menyenangkan

  • Ada pandangan positif terhadap rilis baru React, namun juga kekhawatiran bahwa pemula mungkin akan kesulitan untuk mulai menggunakannya

    • React masih merupakan framework yang sangat baik dan rilis kali ini dianggap membawa perbaikan
    • Kritiknya lebih ditujukan pada pengembangan frontend secara umum, bukan pada React itu sendiri

  • Ada pendapat bahwa kompleksitas framework sisi klien terus meningkat

    • Merasa bahwa kompleksitas meningkat di semua area, termasuk backend, frontend, dan stack DevOps

  • Penambahan fitur ref as a prop pada rilis baru dinilai positif karena membuat forwardRef tidak lagi diperlukan

  • Menyebut Jotai, klon Recoil, sebagai pengganti Redux, dan menyatakan bahwa Jotai kompatibel dengan React 19

    • Menganggap pengelola state lain bisa menjadi hambatan karena kompleksitas frontend

  • Ada pendapat yang berharap nama API use diubah

    • Menganggap orang yang baru pertama kali mengenal React hooks bisa merasa bingung

  • Menilai positif keputusan menunda rilis demi menyelesaikan masalah parallel suspense

  • Ada pertanyaan apakah hook useActionState bisa dibangun berdasarkan hook bawaan yang sudah ada

  • Menilai positif penambahan fitur yang mendorong penggunaan teknologi web standar serta fitur yang meningkatkan quality of life

    • Kecewa karena pemicu suspense masih memerlukan dukungan framework
    • Pernah mencoba memahami mekanisme suspense melalui TanStack Query, tetapi tidak berhasil