Advanced · Level 9: React AdvancedAdvanced90 menitBahasa Indonesia

Uji Kompetensi Resilience and Suspense Basics

Checkpoint kesiapan menambahkan fallback, reset recovery, dan keputusan Suspense dasar pada React feature kecil.

StatusMemuat progres

ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

Mengecek pemahaman Error Boundary dan fallback UI
Membuat recovery flow untuk feature yang gagal
Menjelaskan kapan Suspense lazy loading sesuai digunakan

ReactResilienceSuspenseError RecoveryAssessment

Isi lesson

6 blok

1.
Checkpoint: gagal dengan jelas, pulih dengan masuk akalBelum selesaiWajib
2.
QuizBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Baca resilience pattern dari docs ReactBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Checkpoint: gagal dengan jelas, pulih dengan masuk akal

Wajib

Uji Kompetensi ini berfokus pada area UI yang tetap membantu ketika satu feature bermasalah. Kamu akan membuat fallback kecil dan reset recovery yang dapat dicoba user. Quiz dan refleksi akan mengecek batas Error Boundary serta pola lazy loading dengan Suspense.

Kamu belum perlu error monitoring platform, data-fetching Suspense, framework error route, atau retry backoff yang kompleks. Fokusnya adalah feature-level resilience dengan tindakan yang jelas.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Resilience and Suspense Basics

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Apa tujuan utama Error Boundary?

Coding practice

WajibDibuka di workspace khusus

Bangun resilient preview checkpoint

Checkpoint membangun fallback dan reset recovery untuk Preview Profil agar feature dapat kembali ke state aman.

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.

11 cek otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Jelaskan resilience plan untuk feature `ProfilePreview` dengan format berikut: - Render error yang perlu dibatasi: - Apa yang Error Boundary dapat dan tidak dapat tangkap: - Isi fallback UI dan recovery action: - Kapan lazy loading dengan Suspense layak digunakan: - Hal yang sengaja belum dibangun di module ini: Tulis sebagai catatan implementasi singkat untuk rekan satu tim.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/420 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Membedakan render error dari event handler atau async error.
Menjelaskan feature yang dibungkus boundary dan dampaknya.
Menyebut fallback UI serta recovery action yang konkret.
Menjelaskan lazy loading dan Suspense tanpa menganggapnya sebagai data-fetching architecture.
Menyebut satu batas scope yang memang belum dibangun.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca resilience pattern dari docs React

Gunakan docs ini untuk membedakan tanggung jawab boundary, fallback, lazy loading, dan reset state sebelum menerapkannya di Local React App.

React

Catching Rendering Errors with an Error Boundary

Fokus baca

render error yang dapat ditangkap boundary
fallback UI setelah boundary aktif
batas boundary terhadap event handler dan async code

Abaikan dulu

error monitoring service

Buka dokumentasi

React

lazy

Fokus baca

dynamic import untuk component lazy
default export yang dibutuhkan lazy
hubungan lazy dengan Suspense

Abaikan dulu

bundle analysis yang kompleks

Buka dokumentasi

React

Suspense

Fokus baca

fallback saat component lazy belum siap
batas area Suspense
copy fallback yang tidak mengganggu UI lain

Abaikan dulu

Suspense data fetching
streaming server rendering

Buka dokumentasi

React

Preserving and Resetting State

Fokus baca

state reset dengan key
kapan component instance perlu dibuat ulang
perbedaan reset dan update biasa

Abaikan dulu

form reset yang sangat besar

Buka dokumentasi

Aksi setelah membaca

Di Local React App kamu, pilih satu feature yang berisiko gagal. Tulis batas Error Boundary-nya, fallback copy, dan satu recovery action. Jika ada panel non-kritis, putuskan apakah lazy loading benar-benar memberi manfaat sebelum menggunakannya.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Error Boundary melindungi child tree dari render error, bukan semua jenis error.
Fallback UI memberi konteks dan recovery action saat satu feature tidak tersedia.
React.lazy dan Suspense mengelola pemuatan component lazy dengan fallback sementara.
Retry dan reset dipilih berdasarkan sumber kegagalan, bukan sebagai button universal.
Berikutnya, Performance Awareness akan mengajarkan cara mengukur sebelum mengoptimalkan React feature.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: gagal dengan jelas, pulih dengan masuk akal.

Memuat progres Review module