Uji Kompetensi State Strategy
Checkpoint kesiapan memilih state lokal, derived value, reducer, dan context berdasarkan masalah yang benar-benar dihadapi component.
Yang dicek
- Memilih lokasi state berdasarkan pemilik behavior
- Membedakan derived value dari state sumber
- Menerapkan reducer sederhana dan menjelaskan kapan context layak dipakai
Isi lesson
6 blok- 1.Checkpoint: setiap state harus punya alasan tempat tinggalBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca state design dari docs ReactBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: setiap state harus punya alasan tempat tinggal
WajibDi module ini, fokusnya bukan mengumpulkan API React. Kamu sedang melatih keputusan desain: siapa yang memiliki state, apakah value perlu disimpan, apakah perubahan sudah cukup terkait untuk reducer, dan apakah sharing lintas tree memang nyata.
Uji Kompetensi ini memakai filter lesson kecil. Kamu akan mengorganisasi transisi filter dengan reducer dan menghitung hasil list saat render. Setelah itu, kamu akan menjelaskan pilihan state untuk beberapa kasus UI yang berbeda.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi State Strategy
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
Dua sibling, FilterBar dan LessonList, membutuhkan selectedCategory yang sama. State paling tepat berada di...
Coding practice
WajibDibuka di workspace khususBangun state strategy checkpoint
Checkpoint mengelola filter terkait dengan reducer dan menghitung visibleLessons dari data sumber saat render.
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.
Writing practice
WajibLatihan menulis
Jelaskan keputusan state untuk empat kasus berikut: 1. `isExpanded` hanya dipakai oleh satu LessonCard. 2. `selectedCategory` dibaca oleh FilterBar dan LessonList yang bersaudara. 3. Query, filter wajib, dan urutan list berubah lewat beberapa action terkait. 4. Theme preference dibaca oleh toolbar dan preview yang berjauhan di tree. Untuk setiap kasus, sebutkan lokasi atau pola state yang kamu pilih dan alasan singkatnya.
Tulis draft dulu sebelum menandai writing practice selesai.
0/360 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca state design dari docs React
Gunakan dokumentasi ini untuk membandingkan keputusan state kamu dengan pola React resmi, bukan untuk mencari satu pola yang wajib untuk semua feature.
React
Choosing the State Structure
Fokus baca
- menghindari redundant state
- menyimpan sumber data, bukan salinannya
- mengelompokkan state yang berubah bersama
Abaikan dulu
- optimasi dengan memoization
React
Sharing State Between Components
Fokus baca
- closest common parent
- satu sumber state untuk sibling
- perbedaan state lokal dan lifted state
Abaikan dulu
- component hierarchy yang sangat besar
React
Extracting State Logic into a Reducer
Fokus baca
- action type sebagai nama kejadian
- reducer sebagai tempat transisi state
- kapan reducer membuat event handler lebih ringkas
Abaikan dulu
- reducer dan context pada app skala besar
React
Passing Data Deeply with Context
Fokus baca
- masalah prop drilling yang nyata
- provider dan useContext
- batas context kecil yang spesifik
Abaikan dulu
- global state libraries
- provider nesting yang kompleks
Aksi setelah membaca
Buka Local React App kamu. Pilih satu state yang ada lalu tulis satu kalimat: tetap lokal, dinaikkan ke parent, dihitung saat render, dipindah ke reducer, atau dibagikan lewat context. Sertakan alasannya.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- State tinggal dekat dengan component yang memilikinya sampai ada kebutuhan berbagi nyata.
- Derived value dihitung dari data sumber agar UI tidak menyimpan salinan yang mudah tertinggal.
- Reducer membantu saat beberapa transisi state sudah membentuk satu flow terkait.
- Context menyelesaikan sharing lintas tree, bukan semua props atau semua state application.
- Kamu siap masuk ke Reusable UI States untuk membangun loading, error, empty, dan retry UI yang konsisten.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: setiap state harus punya alasan tempat tinggal.