Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced75 menitBahasa Indonesia

Submit State

Menangani pending, success, dan error submit agar user tahu apakah perubahan sedang diproses atau belum tersimpan.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menggunakan formState.isSubmitting untuk pending state
Mencegah submit ganda selama request berjalan
Menampilkan success dan error state yang jelas
Menangani error async di submit handler

React Hook FormAsync UISubmit StateError Handling

Isi lesson

6 blok

1.
Submit punya status yang perlu terlihatBelum selesaiWajib
2.
Pending, success, dan error pada satu submit flowBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Success message mengikuti hasil operasi, bukan klik tombolBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Submit punya status yang perlu terlihat

Wajib

Setelah user menekan Simpan, UI harus menjawab: apakah request sedang berjalan, apakah perubahan berhasil, dan apa yang dapat dilakukan bila gagal. Tanpa pending state, user bisa mengirim request yang sama berkali-kali. Tanpa success state, user tidak tahu data tersimpan. Tanpa error state, tombol yang gagal terasa seperti tidak melakukan apa-apa.

React Hook Form menyediakan formState.isSubmitting selama submit handler async berjalan. Gunakan untuk menonaktifkan button dan memberi label pending. Submit handler tetap perlu try/catch untuk operasi async yang gagal. Jangan menampilkan error API mentah ke user; ubah menjadi pesan aman serta dapat ditindaklanjuti dan simpan detail diagnosis di tempat yang tepat.

Bagian ini memengaruhi progres lesson.

Pending, success, dan error pada satu submit flow

Wajib

tsx

"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import type { ProfileFormValues } from "@/lib/validation/profile-schema";

type SubmitStatus = "idle" | "success" | "error";

async function saveProfile(values: ProfileFormValues) {
  await new Promise((resolve) => setTimeout(resolve, 400));
  return values;
}

export function ProfileForm() {
  const [submitStatus, setSubmitStatus] = useState<SubmitStatus>("idle");
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm<ProfileFormValues>();

  async function onSubmit(values: ProfileFormValues) {
    setSubmitStatus("idle");

    try {
      await saveProfile(values);
      setSubmitStatus("success");
    } catch {
      setSubmitStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input aria-label="Nama tampilan" {...register("displayName")} />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Menyimpan..." : "Simpan profile"}
      </button>
      {submitStatus === "success" ? <p>Profile tersimpan.</p> : null}
      {submitStatus === "error" ? <p>Profile belum tersimpan. Coba lagi.</p> : null}
    </form>
  );
}

isSubmitting berasal dari form library dan submitStatus menyimpan hasil setelah request selesai. saveProfile di contoh hanya simulasi. Pada app nyata, panggil server action atau endpoint yang juga memvalidasi data dan memeriksa authorization. Jangan menampilkan success hanya karena button diklik atau validation client lolos.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Handle profile submit state

Lengkapi submit handler async dengan isSubmitting dan success/error state agar button serta feedback mengikuti hasil request.

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.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mengapa button submit disabled saat isSubmitting true?

Progres lesson naik setelah jawaban benar.

Tips

Wajib

Success message mengikuti hasil operasi, bukan klik tombol

Tampilkan status berhasil setelah operasi yang dianggap berhasil benar-benar selesai. Untuk feature yang memuat ulang data atau berpindah route, tentukan sumber kebenaran setelah submit lalu uji hasil akhir. State client yang optimistis dibahas lebih lanjut pada module Server-State Thinking.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

isSubmitting menandai submit async yang masih berjalan.
Button disabled dan label pending mencegah submit ganda.
Success serta error state menjelaskan hasil operasi setelah request selesai.
try/catch menghasilkan failure state yang dapat dipahami user.
Berikutnya, schema dan type akan dipakai ulang agar aturan tidak tersebar di UI serta submit boundary.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Submit punya status yang perlu terlihat.

Memuat progres Review module