React 19 akan segera hadir!

Tim React baru-baru ini membagikan sebuah postingan blog yang merinci pekerjaan mereka pada beberapa fitur utama. Dan ini menandakan bahwa versi baru dari React.js akan segera hadir.

Kita akan mendapatkan semua fitur baru ketika versi baru ini tiba, tetapi mari kita lihat sekilas fitur-fitur baru yang menarik yang akan dibawanya.

React Compiler (Tidak ada lagi useMemo, useCallback, dan memo)

Ini adalah fitur yang paling menarik bagi saya. Kami menyadari bahwa salah satu aspek yang paling menantang dalam pengembangan React adalah memoization. Sebelumnya, untuk menghindari penghitungan ulang nilai dan fungsi untuk setiap render, pengembang mengandalkan hook useMemo dan useCallback, sementara memo digunakan untuk mencegah render ulang komponen yang tidak perlu.

Namun, pendekatan ini sering kali terlalu rumit dan rentan terhadap kesalahan kritis. Pada dasarnya, fitur-fitur tersebut adalah fitur yang tidak disukai oleh sebagian besar pengembang React.

Setelah versi baru dari React, memorisasi secara manual tidak akan menjadi masalah lagi karena kompiler React yang baru akan menanganinya secara otomatis. Namun, hal ini akan datang dengan seperangkat aturan. Kompiler akan mencoba mendeteksi contoh-contoh di mana kode tidak secara ketat mematuhi aturan React. Kemudian akan mengkompilasi kode dengan aman atau melewatkan proses kompilasi jika kode tersebut tidak aman. Dan di sini, menggunakan Strict Mode memainkan peran penting dalam memastikan semuanya bekerja dengan baik dalam mode pengembangan. Dengan aturan ESLint yang akan datang, saya rasa kita tidak akan menemui masalah.

Perlu disebutkan bahwa fitur ini saat ini sedang digunakan dalam produksi oleh Instagram.

React Actions

Jika Anda menggunakan framework React seperti Next.js, Anda mungkin sudah tidak asing lagi dengan server actions. Dengan versi baru dari Next.js, kita dapat mengirimkan form untuk mengeksekusi mutasi basis data di sisi server. React 19 telah memperluas API ini untuk mendukung penanganan data dalam aplikasi khusus klien juga. Ini berarti tidak perlu lagi mengandalkan event ‘onClick’ untuk tombol form atau event ‘onSubmit’ untuk form itu sendiri. Sekarang, kita dapat mendefinisikan aksi formulir untuk menangani semua fungsionalitas.

Action function ini dapat beroperasi secara sinkron maupun asinkron. Anda dapat mendefinisikannya di server dalam direktif ‘use server’.

<form action={find}>
  <input name="username" />
  <button>Find</button>
</form>

useFormState dan useFormStatus Hooks

Namun tantangan terbesar dalam menggunakan action adalah tidak bisa mendapatkan status (isPending, isSuccess, isError) dari action untuk memperbarui elemen form. Di sinilah hook useFormState dan useFormStatus berperan. useFormState memungkinkan kita untuk mendapatkan respons dari action yang dikirim, sehingga kita dapat menampilkan pesan kesalahan atau keberhasilan kepada pengguna. useFormStatus memungkinkan kita untuk melacak status action. Jika masih dalam proses, kita dapat menonaktifkan input dan tombol submit.

Saya akan membahas lebih dalam tentang fungsi-fungsi ini nanti, tetapi izinkan saya menunjukkan kepada Anda sekilas (jika Anda mengikuti tutorial Next.js saya, Anda mungkin tahu cara menggunakannya).

useFormState

import { useFormState } from "react-dom";

const login = async (previousState, formData) => {
  try{
    //Login process
  }catch(err){
    return err.message
  }
}

const LoginForm = () => {
  const [state, formAction] = useFormState(login, undefined);
  return (
    <form action={formAction}>
      <input name="username"/>
      <input name="password"/>
      <button>Login</button>
      {state}
    </form>
  )
}

useFormStatus

const Submit = () => {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

useOptimistic Hook

Salah satu hook favorit saya adalah useOptimistic. Hook ini memungkinkan Anda untuk memperbarui status sementara saat proses masih berlangsung di background.

Katakanlah Anda memiliki sebuah fungsi suka di media sosial. Ketika seorang pengguna mengklik tombol suka, Anda tidak perlu menunggu respons dari database. Anda dapat langsung menambah jumlah suka dan mengubah warna ikon jempol. Jika respons database tidak berhasil, maka secara otomatis akan mengurangi jumlah dan mengubah kembali stylenya.

Sekali lagi, saya akan mempublikasikan tutorial lengkap tentang hook ini segera.

Asset Loading

Pembaruan menarik lainnya adalah peningkatan pemuatan resource seperti stylesheet, fonts, dan script di React 19. Dengan integrasi Suspense ke dalam siklus pemuatan sumber daya, kita dapat memperoleh waktu pemuatan yang lebih cepat untuk merender halaman.

Selain itu, React 19 juga mengenalkan kemampuan untuk melakukan preload resource, sehingga meningkatkan pengalaman pengguna secara menyeluruh.

Metadata SEO Improvement

Salah satu dari keunggulan Next.js adalah kemampuan untuk menambahkan metadata yang diinginkan pada komponen. Dengan versi baru React, kita akan memiliki kemampuan untuk me-render metadata seperti judul, meta, dan tautan di mana saja di dalam tree component kita.

Ini adalah fitur yang paling dinanti-nantikan dari React. Tetapi masih banyak lagi yang lainnya. Terima kasih sudah membaca. Sampai jumpa minggu depan ❤️