Mesin Validasi React useFormState: Panduan Mendalam tentang Validasi Formulir Multi-Tahap

Di dunia pengembangan web modern, menciptakan pengalaman pengguna yang intuitif dan andal adalah hal yang terpenting. Hal ini menjadi sangat krusial dalam formulir, gerbang utama interaksi pengguna. Meskipun formulir kontak sederhana mudah dibuat, kompleksitasnya meroket pada formulir multi-tahap—seperti wizard pendaftaran pengguna, proses checkout e-commerce, atau panel konfigurasi yang detail. Proses multi-langkah ini menghadirkan tantangan signifikan dalam manajemen state, validasi, dan menjaga alur pengguna yang lancar. Secara historis, pengembang harus berurusan dengan state sisi klien yang kompleks, context provider, dan pustaka pihak ketiga untuk mengatasi kerumitan ini.

Hadirnya hook `useFormState` dari React. Diperkenalkan sebagai bagian dari evolusi React menuju komponen yang terintegrasi dengan server, hook yang andal ini menawarkan solusi yang ramping dan elegan untuk mengelola state dan validasi formulir, terutama dalam konteks formulir multi-tahap. Dengan berintegrasi langsung dengan Server Actions, `useFormState` menciptakan mesin validasi yang tangguh yang menyederhanakan kode, meningkatkan kinerja, dan mengedepankan progressive enhancement. Artikel ini menyediakan panduan komprehensif bagi para pengembang di seluruh dunia tentang cara merancang mesin validasi multi-tahap yang canggih menggunakan `useFormState`, mengubah tugas yang kompleks menjadi proses yang dapat dikelola dan diskalakan.

Tantangan Abadi Formulir Multi-Tahap

Sebelum mendalami solusinya, penting untuk memahami masalah umum yang dihadapi pengembang dengan formulir multi-tahap. Tantangan ini tidak sepele dan dapat memengaruhi segalanya, mulai dari waktu pengembangan hingga pengalaman pengguna akhir.

• Kompleksitas Manajemen State: Bagaimana Anda menyimpan data saat pengguna bernavigasi antar langkah? Haruskah state berada di komponen induk, konteks global, atau local storage? Setiap pendekatan memiliki kelebihan dan kekurangannya, sering kali menyebabkan prop-drilling atau logika sinkronisasi state yang rumit.
• Fragmentasi Logika Validasi: Di mana validasi harus terjadi? Memvalidasi semuanya di akhir memberikan pengalaman pengguna yang buruk. Memvalidasi di setiap langkah lebih baik, tetapi ini sering kali memerlukan penulisan logika validasi yang terfragmentasi, baik di sisi klien (untuk umpan balik instan) maupun di sisi server (untuk keamanan dan integritas data).
• Hambatan Pengalaman Pengguna: Pengguna berharap dapat bolak-balik antar langkah tanpa kehilangan data mereka. Mereka juga mengharapkan pesan kesalahan yang jelas, kontekstual, dan umpan balik segera. Menerapkan pengalaman yang lancar ini dapat melibatkan banyak kode boilerplate.
• Sinkronisasi State Server-Klien: Sumber kebenaran utama biasanya adalah server. Menjaga agar state sisi klien selaras sempurna dengan aturan validasi dan logika bisnis sisi server adalah perjuangan terus-menerus, yang sering kali menyebabkan duplikasi kode dan potensi inkonsistensi.

Tantangan-tantangan ini menyoroti perlunya pendekatan yang lebih terintegrasi dan kohesif—yang menjembatani kesenjangan antara klien dan server. Inilah tepatnya di mana `useFormState` unggul.

Memperkenalkan `useFormState`: Pendekatan Modern untuk Penanganan Formulir

Hook `useFormState` dirancang untuk mengelola state formulir yang diperbarui berdasarkan hasil dari sebuah form action. Ini adalah landasan dari visi React untuk aplikasi yang ditingkatkan secara progresif yang bekerja dengan lancar baik dengan atau tanpa JavaScript diaktifkan di sisi klien.

Apa itu `useFormState`?

Pada intinya, `useFormState` adalah Hook React yang menerima dua argumen: fungsi server action dan state awal. Hook ini mengembalikan sebuah array yang berisi dua nilai: state formulir saat ini dan fungsi action baru untuk diteruskan ke elemen `

` Anda.

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

Setiap kali formulir dikirim, React memanggil `myServerAction` dengan state sebelumnya dan data formulir. Apa pun yang dikembalikan oleh `myServerAction` akan menjadi `state` yang baru. Pola yang sederhana namun kuat ini memungkinkan server untuk menentukan state formulir, termasuk kesalahan validasi, pesan keberhasilan, atau informasi relevan lainnya.

Kekuatan Integrasi dengan Server Actions

Server Actions adalah fungsi yang dapat didefinisikan di server tetapi dipanggil dari klien, mengaburkan batas antara kode sisi klien dan sisi server dengan cara yang aman dan efisien. Ketika digabungkan dengan `useFormState`, mereka menciptakan sebuah siklus tertutup:

1. Pengguna mengisi formulir dan mengirimkannya.
2. `formAction` yang disediakan oleh `useFormState` dipanggil, yang kemudian memanggil server action.
3. Server action menerima data formulir, melakukan validasi dan logika bisnis.
4. Server action mengembalikan objek state baru (misalnya, `{ errors: { email: 'Format email tidak valid' } }`).
5. Hook `useFormState` memperbarui `state`-nya dengan objek yang dikembalikan, memicu render ulang.
6. UI diperbarui untuk menampilkan kesalahan validasi atau pesan keberhasilan langsung dari respons server.

Pendekatan ini memusatkan logika validasi di server, memastikan integritas data dan mengurangi kompleksitas kode di sisi klien. Ini juga bekerja sempurna dengan progressive enhancement; jika JavaScript gagal dimuat, pengiriman formulir tetap berfungsi sebagai post formulir HTML standar.

Membangun Mesin Validasi Multi-Tahap: Panduan Praktis

Mari kita buat contoh praktis untuk mendemonstrasikan kekuatan `useFormState` sebagai mesin validasi multi-tahap. Tujuan kita adalah membuat formulir orientasi pengguna tiga langkah yang andal, ramah pengguna, dan mudah dipelihara.

Skenario: Formulir Orientasi Pengguna Tiga Langkah

• Langkah 1: Informasi Pribadi - Mengumpulkan nama dan alamat email pengguna.
• Langkah 2: Detail Perusahaan - Mengumpulkan nama perusahaan dan jabatan pengguna.
• Langkah 3: Konfirmasi Akhir - Menampilkan semua informasi yang dikumpulkan untuk ditinjau sebelum pengiriman akhir.

Pengaturan Proyek dan State Awal

Pertama, mari kita definisikan state awal untuk formulir kita dan struktur untuk server action kita. Kita akan mengelola seluruh state formulir dalam satu objek, termasuk langkah mana yang sedang aktif.

Dalam file seperti `actions.js` (ditandai dengan `'use server'`):

// actions.js
'use server';

import { z } from 'zod'; // Pustaka validasi yang populer

const schema = z.object({
name: z.string().min(2, 'Nama harus terdiri dari minimal 2 karakter.'),
email: z.string().email('Alamat email tidak valid.'),
companyName: z.string().min(3, 'Nama perusahaan wajib diisi.'),
role: z.string().min(2, 'Jabatan wajib diisi.'),
});

export async function onbordingAction(prevState, formData) {
const step = Number(formData.get('_step'));
const name = formData.get('name');
const email = formData.get('email');
const companyName = formData.get('companyName');
const role = formData.get('role');

const currentState = {
name, email, companyName, role,
};

// Logika untuk setiap langkah akan ada di sini...
return {
...prevState,
...currentState,
message: 'Pesan state default'
};
}

Dan komponen utama kita akan mengelola langkah saat ini:

// OnboardingForm.jsx
'use client';

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

const initialState = {
message: null,
errors: {},
step: 1,
};

export default function OnboardingForm() {
const [state, formAction] = useFormState(onbordingAction, initialState);

return (

{state.step === 1 && }
{state.step === 2 && }
{state.step === 3 && }

);
}

Langkah 1: Mengambil dan Memvalidasi Informasi Pribadi

Pada langkah ini, kita hanya ingin memvalidasi kolom `name` dan `email`. Kita akan menggunakan input tersembunyi `_step` untuk memberitahu server action kita logika validasi mana yang harus dijalankan.

// Komponen Step1.jsx
export function Step1({ state }) {
return (

);
}

Sekarang, mari kita perbarui server action kita untuk menangani validasi untuk Langkah 1.

// actions.js (diperbarui)
// ... (impor dan definisi skema)

export async function onbordingAction(prevState, formData) {
// ... (ambil data formulir)
const step = Number(formData.get('_step'));

if (step === 1) {
const validatedFields = schema.pick({ name: true, email: true }).safeParse({ name, email });

if (!validatedFields.success) {
return {
...currentState,
step: 1,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Berhasil, pindah ke langkah berikutnya
return {
...currentState,
step: 2,
errors: {},
};
}
// ... (logika untuk langkah lain)
}

Saat pengguna mengklik "Berikutnya", formulir dikirim. Server action memeriksa bahwa ini adalah Langkah 1, memvalidasi hanya kolom `name` dan `email` menggunakan metode `pick` dari Zod, dan mengembalikan state baru. Jika validasi gagal, ia mengembalikan kesalahan dan tetap di Langkah 1. Jika berhasil, ia menghapus kesalahan dan memperbarui `step` menjadi 2, menyebabkan komponen `OnboardingForm` utama kita merender komponen `Step2`.

Langkah 2: Validasi Progresif untuk Detail Perusahaan

Keindahan dari pendekatan ini adalah state dari Langkah 1 secara otomatis terbawa. Kita hanya perlu merendernya dalam kolom tersembunyi agar disertakan dalam pengiriman formulir berikutnya.

// Komponen Step2.jsx
export function Step2({ state }) {
return (

);
}

Dan kita memperbarui server action untuk menangani Langkah 2.

// actions.js (diperbarui)
// ...
if (step === 2) {
const validatedFields = schema.pick({ companyName: true, role: true }).safeParse({ companyName, role });

if (!validatedFields.success) {
return {
...currentState,
step: 2,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Berhasil, pindah ke tinjauan akhir
return {
...currentState,
step: 3,
errors: {},
};
}
// ...

Logikanya identik dengan Langkah 1, tetapi menargetkan kolom untuk Langkah 2. Hook `useFormState` dengan mulus mengelola transisi, menjaga semua data, dan menyediakan alur validasi progresif yang bersih.

Langkah 3: Tinjauan Akhir dan Pengiriman

Pada langkah terakhir, kita menampilkan semua data yang dikumpulkan untuk ditinjau oleh pengguna. Pengiriman akhir akan memicu validasi komprehensif dari semua kolom sebelum kita menyimpan data ke basis data.

// Komponen Step3.jsx
export function Step3({ state }) {
return (

);
}

Logika server action terakhir melakukan validasi penuh dan logika bisnis akhir.

// actions.js (versi akhir)
// ...
if (step === 3) {
// Validasi akhir dan lengkap
const validatedFields = schema.safeParse({ name, email, companyName, role });

if (!validatedFields.success) {
// Seharusnya tidak terjadi jika validasi langkah demi langkah benar, tetapi ini adalah pengaman yang baik
return {
...currentState,
step: 1, // Kirim pengguna kembali ke langkah pertama dengan kesalahan
errors: validatedFields.error.flatten().fieldErrors,
message: 'Error: Ditemukan data tidak valid. Silakan tinjau kembali.'
};
}

try {
// console.log('Mengirim ke basis data:', validatedFields.data);
// await saveToDatabase(validatedFields.data);
return { message: 'Sukses! Orientasi Anda telah selesai.', step: 4 }; // Langkah keberhasilan terakhir
} catch (dbError) {
return { ...currentState, step: 3, message: 'Error: Tidak dapat menyimpan data.' };
}
}
// ...

Dengan ini, kita memiliki formulir multi-tahap yang lengkap dan andal dengan validasi progresif yang otoritatif di server, semuanya diatur dengan rapi oleh hook `useFormState`.

Strategi Tingkat Lanjut untuk Pengalaman Pengguna Kelas Dunia

Membangun formulir yang fungsional adalah satu hal; membuatnya menyenangkan untuk digunakan adalah hal lain. Berikut adalah beberapa teknik tingkat lanjut untuk meningkatkan formulir multi-tahap Anda.

Mengelola Navigasi: Bergerak Maju dan Mundur

Logika kita saat ini hanya bergerak maju. Untuk memungkinkan pengguna kembali, kita tidak bisa menggunakan tombol `type="submit"` sederhana. Sebagai gantinya, kita akan mengelola langkah di state komponen sisi klien dan hanya menggunakan form action untuk progresi maju. Namun, pendekatan yang lebih sederhana yang tetap berpegang pada model berpusat pada server adalah dengan memiliki tombol "Kembali" yang juga mengirimkan formulir tetapi dengan niat yang berbeda.

// Di dalam komponen langkah...
Kembali
Berikutnya

// Di dalam server action...
const intent = formData.get('intent');
if (intent === 'back') {
return { ...currentState, step: step - 1, errors: {} };
}

Memberikan Umpan Balik Instan dengan `useFormStatus`

Hook `useFormStatus` menyediakan state tertunda dari pengiriman formulir di dalam `

` yang sama. Ini sempurna untuk menonaktifkan tombol dan menampilkan pemuat (spinner), yang sangat penting untuk UX yang baik, terutama pada koneksi jaringan yang lebih lambat.

// SubmitButton.jsx
'use client';

import { useFormStatus } from 'react-dom';

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

return (

{pending ? 'Mengirim...' : text}

);
}

Anda kemudian dapat menggunakan `` di komponen langkah Anda sebagai ganti `` standar.

Menstrukturkan Server Action Anda untuk Skalabilitas

Seiring bertambahnya ukuran formulir Anda, rantai `if/else if` di server action bisa menjadi sulit dikelola. Pernyataan `switch` atau pola yang lebih modular direkomendasikan untuk organisasi yang lebih baik.

// actions.js dengan pernyataan switch
switch (step) {
case 1:
// Tangani validasi Langkah 1
break;
case 2:
// Tangani validasi Langkah 2
break;
// ... dst
}

Aksesibilitas (a11y) Tidak Dapat Ditawar

Untuk audiens global, aksesibilitas adalah suatu keharusan. Pastikan formulir Anda dapat diakses dengan:

• Menggunakan `aria-invalid="true"` pada kolom input yang memiliki kesalahan.
• Menghubungkan pesan kesalahan ke input menggunakan `aria-describedby`.
• Mengelola fokus dengan tepat setelah pengiriman, terutama saat kesalahan muncul.
• Memastikan semua kontrol formulir dapat dinavigasi dengan keyboard.

Perspektif Global: Internasionalisasi dan `useFormState`

Salah satu keuntungan signifikan dari validasi yang digerakkan oleh server adalah kemudahan internasionalisasi (i18n). Pesan validasi tidak lagi perlu di-hardcode di sisi klien. Server action dapat mendeteksi bahasa pilihan pengguna (dari header seperti `Accept-Language`, parameter URL, atau pengaturan profil pengguna) dan mengembalikan kesalahan dalam bahasa ibu mereka.

Sebagai contoh, menggunakan pustaka seperti `i18next` di server:

// Server action dengan i18n
import { i18n } from 'your-i18n-config';
// ...
const t = await i18n.getFixedT(userLocale); // mis., 'id' untuk Bahasa Indonesia

const schema = z.object({
email: z.string().email(t('errors.invalid_email')),
});

Pendekatan ini memastikan bahwa pengguna di seluruh dunia menerima umpan balik yang jelas dan dapat dimengerti, secara dramatis meningkatkan inklusivitas dan kegunaan aplikasi Anda.

`useFormState` vs. Pustaka Sisi Klien: Tinjauan Komparatif

Bagaimana pola ini dibandingkan dengan pustaka yang sudah mapan seperti Formik atau React Hook Form? Ini bukan tentang mana yang lebih baik, tetapi mana yang tepat untuk pekerjaan tersebut.

• Pustaka Sisi Klien (Formik, React Hook Form): Ini sangat baik untuk formulir yang kompleks dan sangat interaktif di mana umpan balik sisi klien yang instan adalah prioritas utama. Mereka menyediakan perangkat lengkap untuk mengelola state formulir, validasi, dan pengiriman sepenuhnya di dalam browser. Tantangan utama mereka bisa jadi adalah duplikasi logika validasi antara klien dan server.
• `useFormState` dengan Server Actions: Pendekatan ini unggul di mana server adalah sumber kebenaran utama. Ini menyederhanakan arsitektur secara keseluruhan dengan memusatkan logika, menjamin integritas data, dan bekerja dengan mulus dengan progressive enhancement. Imbalannya adalah perjalanan bolak-balik jaringan untuk validasi, meskipun dengan infrastruktur modern, ini seringkali dapat diabaikan.

Untuk formulir multi-tahap yang melibatkan logika bisnis yang signifikan atau data yang harus divalidasi terhadap basis data (misalnya, memeriksa apakah nama pengguna sudah ada), pola `useFormState` menawarkan arsitektur yang lebih langsung dan tidak rentan terhadap kesalahan.

Kesimpulan: Masa Depan Formulir di React

Hook `useFormState` lebih dari sekadar API baru; ini mewakili pergeseran filosofis dalam cara kita membangun formulir di React. Dengan menganut model yang berpusat pada server, kita dapat membuat formulir multi-tahap yang lebih andal, aman, dapat diakses, dan lebih mudah dipelihara. Pola ini menghilangkan seluruh kategori bug yang terkait dengan sinkronisasi state dan menyediakan struktur yang jelas dan dapat diskalakan untuk menangani alur pengguna yang kompleks.

Dengan membangun mesin validasi dengan `useFormState`, Anda tidak hanya mengelola state; Anda merancang proses pengumpulan data yang tangguh dan ramah pengguna yang berdiri di atas prinsip-prinsip pengembangan web modern. Bagi para pengembang yang membangun aplikasi untuk audiens global yang beragam, hook yang andal ini menyediakan fondasi untuk menciptakan pengalaman pengguna kelas dunia yang sesungguhnya.