Disabled State
Menggunakan pending dan disabled state untuk mencegah submit ganda tanpa membuat form sulit diperbaiki.
Tujuan belajar
- Membedakan field invalid, form pending, dan submit button disabled
- Mencegah submit ganda saat request sedang berjalan
- Menjaga field tetap dapat diperbaiki ketika feedback validation muncul
- Memberi copy pending yang menjelaskan apa yang sedang terjadi
Isi lesson
6 blok- 1.Mencegah submit ganda tidak sama dengan memblokir perbaikanBelum selesaiWajib
- 2.Button pending mencegah submit gandaBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan memakai disabled sebagai pengganti validasiBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Mencegah submit ganda tidak sama dengan memblokir perbaikan
WajibSaat request sedang berjalan, submit button perlu dicegah agar user tidak mengirim data yang sama dua kali. isSubmitting dari React Hook Form cocok untuk membuat button disabled dan mengganti label menjadi "Menyimpan...". Ini adalah pending state: operasi sedang berjalan, bukan validation error.
Jangan otomatis membuat seluruh form disabled hanya karena ada field invalid. User perlu tetap dapat fokus, membaca error, dan memperbaiki nilai. Bahkan saat pending, keputusan untuk mengunci field harus mempertimbangkan apakah request dapat dibatalkan, apakah perubahan berikutnya aman, dan apakah UI menjelaskan kenapa control tidak tersedia.
Bagian ini memengaruhi progres lesson.
Button pending mencegah submit ganda
Wajibimport { useForm } from "react-hook-form";
type ProfileFormValues = {
displayName: string;
};
export function ProfileForm() {
const {
register,
handleSubmit,
formState: { isSubmitting },
} = useForm<ProfileFormValues>();
async function onSubmit(values: ProfileFormValues) {
await saveProfile(values);
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="displayName">Nama tampilan</label>
<input id="displayName" {...register("displayName")} />
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Menyimpan..." : "Simpan profile"}
</button>
</form>
);
}
async function saveProfile(values: ProfileFormValues) {
return values;
}Button disabled selama request berjalan, tetapi form tidak disembunyikan atau dihapus. Label pending memberi konteks mengapa button belum dapat dipakai. Tambahkan state error atau success setelah request selesai; pending sendiri bukan hasil akhir.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususAdd profile pending submit state
Gunakan isSubmitting untuk mencegah duplicate submit dan memberi label pending yang jelas. Preview tidak mengirim request profile.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Apa alasan utama button submit di-disable saat isSubmitting bernilai true?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibJangan memakai disabled sebagai pengganti validasi
Menonaktifkan submit sebelum user memahami syarat form dapat membuat mereka mencari-cari apa yang salah. Untuk form sederhana, biarkan user submit lalu berikan feedback yang jelas. Untuk pola lain, jelaskan syarat secara dekat dengan control. Apa pun pilihannya, server tetap harus memvalidasi data yang diterima.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- isSubmitting menandakan request sedang berjalan, bukan error validasi.
- Disable submit button saat pending untuk mencegah duplicate submit.
- User tetap perlu bisa menemukan dan memperbaiki error field.
- Label pending menjelaskan keadaan button yang berubah.
- Berikutnya, success state mengonfirmasi hasil setelah request benar-benar selesai.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Mencegah submit ganda tidak sama dengan memblokir perbaikan.