React useFormState: Panduan Utama untuk Penanganan Form Modern

Dalam lanskap pengembangan web yang terus berkembang, mengelola state form selalu menjadi tantangan utama. Dari formulir kontak sederhana hingga wizard multi-langkah yang kompleks, para developer telah mencari pola yang tangguh, ramah pengguna, dan mudah dikelola. Dengan hadirnya React Server Components dan Server Actions, paradigma ini bergeser sekali lagi. Masuklah `useFormState`, sebuah hook canggih yang dirancang untuk menjembatani kesenjangan antara interaksi pengguna di sisi klien dan pemrosesan data di server, menciptakan pengalaman yang lebih mulus dan terintegrasi.

Panduan komprehensif ini dirancang untuk audiens global developer React. Baik Anda sedang membangun situs pemasaran sederhana atau aplikasi enterprise yang kompleks dan berbasis data, memahami `useFormState` sangat penting untuk menulis kode React yang modern, berperforma tinggi, dan tangguh. Kita akan menjelajahi konsep intinya, aplikasi praktis, pola-pola canggih, dan bagaimana hook ini berkontribusi dalam membangun pengalaman web yang lebih baik bagi pengguna di seluruh dunia.

Apa Sebenarnya `useFormState` itu?

Pada intinya, `useFormState` adalah Hook React yang memungkinkan komponen memperbarui state-nya berdasarkan hasil dari sebuah aksi form. Hook ini dirancang khusus untuk bekerja dengan Server Actions, sebuah fitur yang memungkinkan komponen klien memanggil fungsi yang berjalan di server secara langsung, tetapi juga dapat digunakan dengan aksi yang berjalan di klien.

Anggap saja ini sebagai manajer state khusus untuk siklus permintaan-respons dari pengiriman form. Saat pengguna mengirimkan form, `useFormState` membantu mengelola informasi yang mengalir kembali dari server—seperti pesan keberhasilan, kesalahan validasi, atau data yang diperbarui—dan menampilkannya di antarmuka pengguna.

Sintaks dan Parameter

Sintaks hook ini sederhana dan elegan:

const [state, formAction] = useFormState(action, initialState);

Mari kita bedah setiap bagiannya:

• action: Ini adalah fungsi yang akan dieksekusi saat form dikirimkan. Biasanya ini adalah Server Action. Fungsi ini harus menerima dua argumen: state sebelumnya dari form dan data form tersebut.
• initialState: Ini adalah nilai yang Anda inginkan untuk state sebelum form pernah dikirimkan. Nilainya bisa sederhana seperti `null` atau objek yang lebih kompleks, misalnya: { message: '', errors: {} }.

Hook ini mengembalikan sebuah array dengan dua elemen:

• state: State saat ini dari form. Pada render awal, nilainya adalah `initialState`. Setelah pengiriman form, nilainya adalah nilai yang dikembalikan oleh fungsi `action` Anda. Ini adalah data reaktif yang akan Anda gunakan untuk merender umpan balik di UI Anda.
• formAction: Versi baru dari fungsi aksi Anda yang sudah dibungkus. Anda harus meneruskan `formAction` ini ke prop `action` dari elemen `
  ` Anda. React menggunakan aksi yang dibungkus ini untuk mengelola pembaruan state di belakang layar.

Masalah yang Dipecahkan `useFormState`: Perspektif Global

Sebelum adanya `useFormState` dan Server Actions, penanganan form di React biasanya melibatkan banyak kode boilerplate di sisi klien. Prosesnya biasanya terlihat seperti ini:

1. State Sisi Klien: Menggunakan `useState` untuk mengelola input form, status loading, dan pesan kesalahan.
2. Event Handler: Menulis fungsi handler `onSubmit` untuk mencegah pengiriman form default.
3. Pengambilan Data: Di dalam handler, secara manual membuat body permintaan dan menggunakan `fetch` atau library seperti Axios untuk mengirim data ke endpoint API server.
4. Pembaruan State: Secara manual memperbarui state loading, dan setelah menerima respons, mem-parsing-nya untuk memperbarui state pesan kesalahan atau keberhasilan.

Pendekatan ini memiliki beberapa kelemahan, terutama untuk aplikasi global:

• Banyak Boilerplate: Setiap form memerlukan serangkaian logika manajemen state yang serupa namun berbeda, yang mengarah pada kode berulang.
• Masalah Latensi Jaringan: Bagi pengguna di wilayah dengan latensi tinggi, jeda antara mengklik "kirim" dan melihat umpan balik bisa sangat signifikan. Pembaruan UI optimis dimungkinkan tetapi menambah lapisan kompleksitas lain.
• Ketergantungan pada JavaScript: Seluruh logika pengiriman form bergantung pada JavaScript. Jika skrip gagal dimuat atau dinonaktifkan, form menjadi sama sekali tidak berfungsi. Ini adalah masalah aksesibilitas dan ketahanan yang kritis bagi basis pengguna global dengan perangkat dan kondisi jaringan yang beragam.
• Keterpisahan Klien-Server: Logika klien dan server sepenuhnya terpisah. Melakukan validasi di server dan kemudian menampilkan kesalahan tersebut di klien memerlukan kontrak API yang dirancang dengan cermat.

`useFormState` yang digabungkan dengan Server Actions secara elegan menyelesaikan masalah-masalah ini. Ini menciptakan saluran langsung yang stateful antara UI form dan logika server. Ini memungkinkan progressive enhancement secara default—form tetap berfungsi tanpa JavaScript—dan secara drastis mengurangi jumlah kode sisi klien yang diperlukan untuk menangani pengiriman form.

Panduan Praktis: Membangun Form Langganan Internasional

Mari kita buat contoh praktis: form langganan buletin untuk layanan global. Kita akan menangani validasi di server dan menampilkan pesan yang sesuai kepada pengguna.

Langkah 1: Definisikan Server Action

Pertama, kita perlu membuat fungsi yang akan berjalan di server. Dalam aplikasi Next.js, Anda biasanya akan menempatkannya di file yang ditandai dengan direktif `'use server'` di bagian atas.

Fungsi ini, sebut saja `subscribeAction`, akan menerima state sebelumnya dan `FormData` dari form. Fungsi ini akan melakukan validasi dan mengembalikan objek state baru.

File: `app/actions.js`

            
'use server';

// Utilitas sederhana untuk mensimulasikan penundaan jaringan untuk tujuan demonstrasi.
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export async function subscribeAction(prevState, formData) {
  const email = formData.get('email');

  // Validasi dasar di sisi server
  if (!email || !email.includes('@')) {
    return { message: 'Silakan masukkan alamat email yang valid.', status: 'error' };
  }

  // Mensimulasikan panggilan database atau permintaan API
  console.log(`Mendaftarkan ${email} ke buletin...`);
  await sleep(1500);

  // Mensimulasikan potensi kesalahan dari layanan pihak ketiga
  if (email === 'fail@example.com') {
    return { message: 'Alamat email ini diblokir. Silakan gunakan yang lain.', status: 'error' };
  }

  // Jika berhasil
  return { message: `Terima kasih telah berlangganan, ${email}!`, status: 'success' };
}

            

              
                Copy
              
            
          

Catatan tentang sintaks fungsi: Fungsi `subscribeAction` mengambil `prevState` sebagai argumen pertamanya. Ini adalah persyaratan untuk fungsi apa pun yang digunakan dengan `useFormState`. Argumen kedua, `formData`, adalah objek FormData standar, yang memberi Anda akses mudah ke nilai input form melalui `formData.get('inputName')`.

Langkah 2: Buat Komponen Form dengan `useFormState`

Sekarang, mari kita buat komponen React kita. Komponen ini akan menggunakan hook `useFormState` untuk mengelola umpan balik dari `subscribeAction` kita.

File: `app/subscription-form.js`

            
'use client';

import { useFormState } from 'react-dom';
import { subscribeAction } from './actions';

const initialState = {
  message: null,
  status: null,
};

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribeAction, initialState);

  return (
    
      
Berlangganan Buletin Global Kami
      
Tetap terupdate dengan berita dan wawasan dari seluruh dunia.
      
      

        Alamat Email:
        
      

      Berlangganan

      {state?.message && (
        

          {state.message}
        
      )}
    
  );
}

            

              
                Copy
              
            
          

Mari kita analisis apa yang terjadi di sini:

1. Kita mengimpor `useFormState` dari `react-dom`. Perhatikan bahwa itu berasal dari `react-dom`, bukan `react`, karena terkait dengan logika rendering DOM dan penanganan form.
2. Kita mendefinisikan objek `initialState`. Inilah yang akan menjadi nilai `state` pada render pertama.
3. Kita memanggil `useFormState(subscribeAction, initialState)` untuk mendapatkan objek `state` kita dan `formAction` yang sudah dibungkus.
4. Kita meneruskan `formAction` yang dikembalikan langsung ke prop `action` dari elemen `
   `. Inilah tautan ajaibnya.
5. Kita secara kondisional merender paragraf untuk menampilkan `state.message` saat nilainya tidak null. Kita bahkan dapat menggunakan `state.status` untuk menerapkan gaya yang berbeda untuk pesan keberhasilan dan kesalahan.

Dengan pengaturan ini, saat pengguna mengirimkan form, React memanggil `subscribeAction` di server. Fungsi tersebut berjalan, dan nilai yang dikembalikannya menjadi `state` baru di komponen kita, yang memicu render ulang untuk menampilkan umpan balik. Semua ini terjadi tanpa panggilan `fetch` manual atau hook `useState` untuk respons server.

Langkah 3: Meningkatkan Pengalaman Pengguna dengan `useFormStatus`

Form kita sudah fungsional, tetapi kehilangan bagian penting dari UX: umpan balik selama proses pengiriman. Aksi server kita memiliki penundaan buatan 1,5 detik, tetapi UI tidak memberikan indikasi apa pun bahwa sesuatu sedang terjadi. Pengguna dengan koneksi lambat mungkin mengklik tombol beberapa kali, mengira itu rusak.

Di sinilah hook pendamping, `useFormStatus`, berperan. Hook ini memberikan informasi tentang status pengiriman `` induknya.

Aturan Penting: `useFormStatus` hanya dapat digunakan di dalam komponen yang merupakan turunan dari elemen ``. Hook ini tidak dapat digunakan di komponen yang sama yang merender `` itu sendiri.

Mari kita buat komponen `SubmitButton` khusus.

File: `app/submit-button.js`

            
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Mendaftar...' : 'Berlangganan'}
    
  );
}

            

              
                Copy
              
            
          

Hook `useFormStatus` mengembalikan objek yang berisi boolean `pending`. Boolean ini bernilai `true` saat form sedang dikirim dan `false` jika sebaliknya. Kita menggunakannya untuk menonaktifkan tombol dan mengubah teksnya, memberikan umpan balik visual yang jelas.

Sekarang, kita perbarui `SubscriptionForm` kita untuk menggunakan komponen baru ini.

File: `app/subscription-form.js` (Diperbarui)

            
'use client';

import { useFormState } from 'react-dom';
import { subscribeAction } from './actions';
import { SubmitButton } from './submit-button'; // Impor komponen baru

// ... initialState tetap sama

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribeAction, initialState);

  return (
    
      {/* ... konten form ... */}
      

        Alamat Email:
        
      

       {/* Gunakan komponen tombol baru */}

      {/* ... tampilan pesan ... */}
    
  );
}

            

              
                Copy
              
            
          

Sekarang form kita memberikan pengalaman pengguna yang lengkap dan profesional. Form ini menunjukkan status pending selama pengiriman dan menampilkan pesan keberhasilan atau kesalahan yang jelas sesudahnya. Dan semua ini dicapai dengan kode yang minimal dan deklaratif.

Konsep Lanjutan dan Praktik Terbaik

Setelah Anda menguasai dasarnya, Anda dapat memanfaatkan `useFormState` untuk skenario yang lebih kompleks.

Menangani Kesalahan Validasi per-Field

Untuk form dengan banyak field, satu pesan kesalahan saja tidak cukup. Anda perlu menunjukkan kepada pengguna field mana saja yang tidak valid. Kita dapat mencapainya dengan mengembalikan objek state yang lebih terstruktur dari aksi server kita.

Mari kita tingkatkan aksi server kita untuk menangani field nama dan email.

File: `app/actions.js` (Ditingkatkan)

            
'use server';

export async function complexSubscribeAction(prevState, formData) {
  await new Promise(res => setTimeout(res, 1000)); // Simulasikan penundaan
  const name = formData.get('name');
  const email = formData.get('email');
  const errors = {};

  if (!name || name.trim().length < 2) {
    errors.name = 'Nama harus memiliki setidaknya 2 karakter.';
  }

  if (!email || !email.includes('@')) {
    errors.email = 'Harap berikan alamat email yang valid.';
  }

  if (Object.keys(errors).length > 0) {
    return { message: 'Validasi gagal. Silakan periksa kembali field yang ada.', errors };
  }

  // Kasus berhasil
  return { message: `Selamat datang, ${name}!`, errors: null };
}

            

              
                Copy
              
            
          

Komponen kita kemudian dapat menggunakan objek kesalahan yang terperinci ini untuk menampilkan pesan di samping input yang sesuai.

Potongan Komponen:

            
const initialState = { message: null, errors: {} };
const [state, formAction] = useFormState(complexSubscribeAction, initialState);

// ... di dalam JSX

  Nama:
  
  {state.errors?.name && 
{state.errors.name}
}


  Email:
  
  {state.errors?.email && 
{state.errors.email}
}


            

              
                Copy
              
            
          

Pola ini menyediakan cara yang tangguh untuk mengimplementasikan validasi full-stack, di mana satu-satunya sumber kebenaran (single source of truth) untuk logika validasi berada di server, tetapi umpan baliknya terintegrasi secara mulus ke dalam UI sisi klien.

Progressive Enhancement: Kekuatan Super Global

Salah satu manfaat paling mendalam dari pola ini adalah progressive enhancement. Jika pengguna menonaktifkan JavaScript, atau jika skrip sisi klien gagal dimuat karena koneksi jaringan yang buruk (skenario umum di banyak bagian dunia), form tersebut tetap berfungsi!

Tanpa JavaScript, pengiriman form akan memicu navigasi halaman penuh. Aksi server akan berjalan, dan server akan merender ulang halaman dengan state baru. Pengguna akan melihat pesan validasi atau konfirmasi keberhasilan yang sama, hanya saja disampaikan melalui pemuatan ulang halaman tradisional. Saat JavaScript diaktifkan, pengguna mendapatkan pengalaman yang disempurnakan dan lebih cepat dengan pembaruan di tempat tanpa perlu me-refresh halaman.

Ini membuat aplikasi Anda lebih tangguh dan dapat diakses oleh audiens global yang lebih luas, terlepas dari kemampuan perangkat atau kualitas jaringan mereka.

Keamanan Tipe dengan TypeScript

Untuk aplikasi skala besar, keamanan tipe (type safety) sangat penting. Anda dapat dengan mudah menambahkan tipe TypeScript ke `useFormState` dan aksi Anda untuk mencegah bug dan meningkatkan pengalaman developer.

            
import type { FC } from 'react';
import { useFormState } from 'react-dom';

// 1. Definisikan bentuk state Anda
type FormState = {
  message: string | null;
  errors?: {
    name?: string;
    email?: string;
  };
};

// 2. Definisikan aksi server dengan tipe
async function typedAction(prevState: FormState, formData: FormData): Promise {
  // ... logika aksi ...
  // Nilai yang dikembalikan harus sesuai dengan tipe FormState
  return { message: 'Berhasil!', errors: undefined };
}

const MyTypedForm: FC = () => {
  const initialState: FormState = { message: null, errors: {} };

  // 3. Hook akan menyimpulkan tipe dengan benar
  const [state, formAction] = useFormState(typedAction, initialState);

  return (
    

      {/* state.errors.name sekarang akan memiliki autocomplete dan pengecekan tipe */}
    
  );
};

            

              
                Copy
              
            
          

Mereset Form Setelah Berhasil

Kebutuhan umum adalah membersihkan field form setelah pengiriman berhasil. Karena `useFormState` hanya mengelola state *hasil*, ia tidak mengontrol elemen input itu sendiri. Perilaku HTML standar adalah browser mempertahankan nilai input setelah pengiriman.

Untuk membersihkan form, Anda dapat memanfaatkan prop `key` pada elemen `

            
// Di dalam komponen Anda
const [formKey, setFormKey] = useState(0);
const [state, formAction] = useFormState(myAction, initialState);

useEffect(() => {
  if (state.status === 'success') {
    // Naikkan nilai key untuk memaksa pemasangan ulang form
    setFormKey(prevKey => prevKey + 1);
  }
}, [state]);

return (
  
    {/* ... field form ... */}
  
);

            

              
                Copy
              
            
          

Pendekatan umum lainnya adalah menggunakan `useRef` pada elemen form dan memanggil `formRef.current.reset()` di dalam hook `useEffect` yang terpicu saat ada perubahan state yang berhasil.

`useFormState` vs. `useState`: Kapan Menggunakan Masing-masing?

Penting untuk dipahami bahwa `useFormState` tidak menggantikan `useState`. Keduanya melayani tujuan yang berbeda, dan Anda akan sering menggunakannya bersamaan.

• `useState` adalah untuk mengelola state sisi klien yang bersifat umum. Ini mencakup hal-hal seperti mengubah visibilitas elemen UI (mis., ikon tampilkan/sembunyikan kata sandi), mengontrol input untuk validasi langsung di sisi klien (mis., memeriksa kekuatan kata sandi saat pengguna mengetik), atau mengelola state apa pun yang tidak secara langsung dihasilkan dari aksi server.
• `useFormState` khusus untuk mengelola state yang merupakan hasil langsung dari aksi pengiriman form. Tugas utamanya adalah untuk mencerminkan hasil dari aksi tersebut kembali ke UI.

Aturan praktis yang baik: Jika perubahan state adalah konsekuensi dari form yang dikirim dan diproses oleh sebuah aksi, `useFormState` adalah alat yang tepat. Untuk semua state UI interaktif lainnya di dalam form Anda, `useState` kemungkinan adalah pilihan yang lebih baik.

Kesimpulan: Era Baru untuk Form React

Hook `useFormState`, bersama dengan Server Actions, merepresentasikan langkah maju yang signifikan untuk penanganan form di React. Hook ini menyederhanakan proses komunikasi antara klien dan server, mengurangi boilerplate, dan menghilangkan seluruh kelas bug yang terkait dengan sinkronisasi state manual.

Dengan menerapkan pola modern ini, Anda dapat membangun aplikasi yang:

• Lebih Berperforma: Lebih sedikit JavaScript di sisi klien berarti waktu muat yang lebih cepat dan nuansa yang lebih responsif, terutama pada perangkat kelas bawah dan jaringan lambat yang umum di banyak pasar internasional.
• Lebih Tangguh: Dengan progressive enhancement yang sudah tertanam, fungsionalitas inti Anda tetap dapat diakses oleh semua pengguna, terlepas dari lingkungan penjelajahan mereka.
• Lebih Mudah Dikelola: Menempatkan aksi form berdekatan dengan UI yang sesuai atau menyimpannya dalam file server terpusat menyederhanakan logika dan membuat basis kode lebih mudah dipahami oleh tim yang terdistribusi secara global.

Seiring ekosistem React terus berkembang, `useFormState` menonjol sebagai alat fundamental untuk membangun aplikasi web generasi berikutnya. Dengan menguasainya, Anda tidak hanya mempelajari hook baru; Anda mengadopsi pendekatan pengembangan web yang lebih tangguh, efisien, dan berwawasan global.