Fitur Baru React 19: Selamat Tinggal useEffect untuk Fetch Data?

Evolusi Menuju Kode yang Lebih Bersih

Selama bertahun-tahun, mengambil data (Fetch API) di React sangatlah merepotkan. Kita harus membuat State untuk data, isLoading, dan error, lalu membungkus fungsi Fetch di dalam useEffect. Jika tidak hati-hati, useEffect ini sering memicu *Infinite Loop* (render tanpa batas).

Di React 19, tim pengembang akhirnya memberikan solusi bawaan (*native*) yang akan membuang ratusan baris kode boilerplate tersebut ke tempat sampah!

1. Keajaiban Hook `use()`

Hook baru bernama use() memungkinkanmu membaca nilai dari Promise (Data Asynchronous) atau *Context* secara langsung di dalam komponen, seolah-olah data itu sudah ada.

import { use, Suspense } from 'react';

// Fungsi fetch biasa (mengembalikan Promise)
const fetchUser = fetch('/api/user').then(res => res.json());

function UserProfile() {
  // Membaca Promise secara instan tanpa useEffect!
  const user = use(fetchUser);
  return <h1>Halo, {user.nama}</h1>;
}

Komponen di atas wajib dibungkus dengan dari luar. Saat Promise masih *pending* (menunggu server), React akan memunculkan UI Loading milik Suspense secara otomatis!

2. Form Actions dan `useActionState`

Mengirim data form (seperti tombol Login atau Tambah Komentar) kini tidak lagi butuh fungsi onSubmit yang panjang. React 19 mengintegrasikan fitur ini dengan Actions.

import { useActionState } from 'react';
import { updateProfil } from './api';

export default function FormProfil() {
  // Mengatur state sukses, data, dan loading secara otomatis!
  const [state, formAction, isPending] = useActionState(updateProfil, null);

  return (
    <form action={formAction}>
      <input type="text" name="nama" />
      <button disabled={isPending}>
        {isPending ? 'Menyimpan...' : 'Simpan'}
      </button>
      {state?.pesan && <p>{state.pesan}</p>}
    </form>
  );
}

3. Animasi Instan dengan `useOptimistic`

Di artikel *batch* sebelumnya kita membahas Optimistic UI (menipu mata pengguna agar web terasa cepat saat menekan tombol *Like*). React 19 kini memiliki Hook resmi bernama useOptimistic() yang secara otomatis mengatur dan me-rollback tampilan jika API server ternyata membalas dengan Error di latar belakang!

Kesimpulan

Pembaruan React 19 sangat difokuskan pada Developer Experience (DX). Dengan menghilangkan kewajiban menulis useEffect untuk tugas-tugas standar I/O jaringan, komponen React masa depan akan terlihat sangat pendek, bersih, dan berfokus murni pada logika UI.