Success State
Memberi konfirmasi setelah submit berhasil dan menawarkan tindakan berikutnya yang relevan tanpa mengaburkan error server.
Tujuan belajar
- Membedakan success state dari pending serta validation state
- Menulis pesan success yang menyatakan tindakan yang selesai
- Memberi next action setelah submit berhasil bila relevan
- Membedakan field validation error dari kegagalan submit atau server
Isi lesson
6 blok- 1.User perlu tahu apa yang benar-benar sudah terjadiBelum selesaiWajib
- 2.Success state dan submit failure memiliki pesan berbedaBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Success client bukan bukti data production amanBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
User perlu tahu apa yang benar-benar sudah terjadi
WajibSetelah request berhasil, user membutuhkan konfirmasi yang spesifik: "Profile tersimpan" lebih jelas daripada "Berhasil". Bila ada langkah berikutnya, tampilkan secara proporsional, misalnya link untuk kembali ke dashboard atau melanjutkan pengaturan. Jangan mengarahkan user secara tiba-tiba tanpa memberi kesempatan membaca hasil, kecuali alur memang mengharuskannya.
Bedakan tiga jenis feedback: field validation error berarti data lokal perlu diperbaiki; submit error berarti request atau server belum menerima perubahan; success berarti operasi sudah dikonfirmasi. Jangan menyamakan error koneksi dengan "email tidak valid". Simpan input user ketika submit gagal bila aman, lalu berikan recovery yang dapat dilakukan.
Bagian ini memengaruhi progres lesson.
Success state dan submit failure memiliki pesan berbeda
Wajibimport { useState } from "react";
type SubmitOutcome = "idle" | "success" | "error";
export function ProfileFeedback() {
const [outcome, setOutcome] = useState<SubmitOutcome>("idle");
return (
<section aria-labelledby="profile-feedback-title">
<h2 id="profile-feedback-title">Simpan profile</h2>
<button type="button" onClick={() => setOutcome("success")}>
Simulasikan simpan
</button>
{outcome === "success" ? (
<p role="status" aria-live="polite">
Profile tersimpan. Kamu dapat kembali ke dashboard.
</p>
) : null}
{outcome === "error" ? (
<p role="alert">
Profile belum tersimpan karena koneksi bermasalah. Coba lagi.
</p>
) : null}
</section>
);
}role=status cocok untuk pembaruan non-darurat seperti success state, sedangkan kegagalan submit perlu pesan error yang jelas dan recovery action. Contoh hanya memperlihatkan struktur state; app lokal tetap perlu menguji response server, retry, serta fokus sesudah perubahan UI.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususShow profile save success feedback
Bedakan feedback success dari submit error dan berikan next action yang jelas setelah profile tersimpan. Preview tidak menyimpan data 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
Manakah copy success state yang paling jelas?
Progres lesson naik setelah jawaban benar.
Catatan penting
WajibSuccess client bukan bukti data production aman
Tampilkan success hanya setelah response yang relevan menyatakan operasi berhasil. Jangan menganggap form sudah aman hanya karena client-side schema lolos. Server perlu memvalidasi, mengautorisasi, dan menyimpan data secara mandiri; UI kemudian menerjemahkan hasilnya menjadi feedback yang aman untuk user.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Success state mengonfirmasi tindakan yang benar-benar selesai.
- Pesan success sebaiknya menyebut hasil dan next action bila relevan.
- Field validation error berbeda dari submit atau server failure.
- Simpan input dan tawarkan recovery ketika submit gagal, jika aman.
- Berikutnya, Uji Kompetensi menyatukan seluruh flow validation UX yang aksesibel.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: User perlu tahu apa yang benar-benar sudah terjadi.