Advanced · Level 9: React AdvancedAdvanced60 menitBahasa Indonesia

Retry and Recovery Patterns

Mereset feature yang gagal ke kondisi aman dan membedakan reset UI dari retry request eksternal.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan retry request dari reset UI feature
Membuat recovery action yang memulihkan feature ke kondisi aman
Menjelaskan flow recovery kepada user dengan copy yang jelas

ReactRecoveryRetryResilience

Isi lesson

5 blok

1.
Recovery perlu mengembalikan feature ke state yang dapat dipakaiBelum selesaiWajib
2.
Reset fallback ke feature yang amanBelum selesaiWajib
3.
Pilih action berdasarkan penyebab kegagalanBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Recovery perlu mengembalikan feature ke state yang dapat dipakai

Wajib

Retry biasanya mencoba kembali pekerjaan eksternal yang sama, misalnya request yang gagal karena koneksi sementara. Reset UI mengembalikan feature ke state aman agar dapat dirender lagi. Keduanya kadang dilakukan bersama, tetapi bukan hal yang sama.

Untuk fallback dari render error, reset dapat berarti membuat instance feature baru dengan key atau state yang bersih. Untuk request error, recovery mungkin memindahkan status dari error ke loading lalu menjalankan request lagi. Action yang tepat bergantung pada sumber kegagalannya.

Bagian ini memengaruhi progres lesson.

Reset fallback ke feature yang aman

Wajib

tsx

function ProfileRecovery() {
  const [hasError, setHasError] = useState(true);
  const [resetKey, setResetKey] = useState(0);

  function handleReset() {
    setHasError(false);
    setResetKey((current) => current + 1);
  }

  if (hasError) {
    return <FeatureFallback onReset={handleReset} />;
  }

  return <ProfilePreview key={resetKey} />;
}

Saat fallback aktif, handleReset mengizinkan feature dirender lagi. `resetKey` memberi React instance baru untuk ProfilePreview bila feature memang perlu memulai local state dari awal.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Pilih action berdasarkan penyebab kegagalan

Gunakan retry jika ada operasi yang masuk akal untuk dijalankan ulang. Gunakan reset jika kamu perlu mengembalikan boundary atau component ke state awal. Jika user tidak memiliki izin atau input belum valid, tampilkan penjelasan dan action yang benar, bukan button retry yang tidak akan mengubah apa pun.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Tambahkan reset recovery untuk ProfilePreview

Latihan memulihkan feature dari fallback ke preview aman dengan reset action dan key baru.

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.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Retry mencoba ulang pekerjaan yang dapat diulang, biasanya request atau action eksternal.
Reset mengembalikan feature atau boundary ke kondisi UI yang aman.
Recovery action perlu sesuai dengan penyebab kegagalan.
Key dapat dipakai untuk membuat instance feature baru saat reset memang diperlukan.
Berikutnya, Uji Kompetensi menggabungkan fallback, recovery, dan keputusan Suspense dasar.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Recovery perlu mengembalikan feature ke state yang dapat dipakai.

Memuat progres Review module