Uji Kompetensi State and Data Strategy
Membuktikan kesiapan memetakan ownership state, persistence, serta recovery path untuk satu feature frontend berukuran menengah.
Yang dicek
- Menyusun peta state dan data ownership untuk satu feature nyata
- Memilih URL, local UI, browser persistence, atau backend dengan alasan lifecycle yang jelas
- Mendefinisikan loading, error, empty, success, serta recovery path
- Menjelaskan mengapa global state tidak diperlukan sebelum ada consumer dan lifecycle yang nyata
Isi lesson
6 blok- 1.Checkpoint: buat state course catalog dapat dijelaskan dari lifecycle-nyaBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Gunakan docs untuk memeriksa lifecycle, bukan mencari alasan memakai storeBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: buat state course catalog dapat dijelaskan dari lifecycle-nya
WajibTim sedang membangun course catalog dengan daftar course dari backend, completion learner, query pencarian, level filter, nomor halaman, panel filter, theme preference, draft feedback pendek, dan error saat catalog gagal dimuat. Mereka mempertimbangkan satu global store untuk seluruh data karena jumlah state mulai terlihat banyak. Pada checkpoint ini, pilih rumah berdasarkan lifecycle: backend memegang course dan completion, URL memegang keputusan hasil yang dapat dibagikan, component memegang panel sementara, browser storage hanya membantu preference atau draft dengan batas yang jelas, dan error memiliki recovery owner. Tujuanmu bukan menunjukkan banyak tooling, tetapi membuat engineer lain dapat menjawab mengapa setiap data tinggal di tempatnya dan apa yang terjadi bila user refresh, membagikan URL, mengganti device, atau request gagal.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi State and Data 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 7
Target lulus: 70
Pertanyaan pertama yang paling membantu saat menentukan rumah sebuah data adalah
Coding practice
WajibDibuka di workspace khususBuild course state and data strategy checkpoint
Buat peta ownership course catalog yang mencakup data server, URL state, local UI, browser persistence, dan recovery tanpa store global.
Tujuan awal: Fokus di tab TS.
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
Tulis state and data strategy note untuk feature course catalog pada project lokal atau case study ini. Daftarkan setidaknya satu server state, URL state, local UI state, persisted browser state, dan backend-persisted data. Untuk setiap keputusan, jelaskan source of truth, apakah harus selamat saat refresh, apakah boleh dibagikan lewat URL, dan alasan memilih rumah tersebut. Tambahkan peta loading/error/empty/success beserta satu recovery path. Tutup dengan alasan mengapa Context atau global store dipakai atau sengaja belum dipakai.
Tulis draft dulu sebelum menandai writing practice selesai.
0/850 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibGunakan docs untuk memeriksa lifecycle, bukan mencari alasan memakai store
Baca referensi resmi sesuai boundary yang sedang kamu putuskan. Dokumentasi membantu memeriksa lifecycle state, search params, data fetching, dan browser storage; ia tidak menggantikan keputusan product tentang siapa source of truth data tersebut.
React
Choosing the State Structure
Fokus baca
- Menghindari state kontradiktif, redundant, serta duplikat.
- Menyimpan source yang diperlukan dan menghitung nilai turunan ketika memungkinkan.
- Menjaga bentuk state tetap mudah diubah serta di-debug.
Abaikan dulu
- Refactor nested state besar yang tidak sedang kamu miliki.
React
Sharing State Between Components
Fokus baca
- Mengangkat state ke common parent terdekat ketika component harus sinkron.
- Memakai props untuk membuat ownership dan event flow tetap terlihat.
- Menunda global state ketika consumer masih lokal pada satu feature.
Abaikan dulu
- State management library sebelum kebutuhan consumer lintas tree terbukti.
Next.js
Layouts and Pages: searchParams
Fokus baca
- Menggunakan searchParams sebagai input untuk pagination atau filtering data.
- Menjaga route state tetap sesuai convention App Router.
- Memisahkan parameter route dari state visual sementara component.
Abaikan dulu
- Dynamic segments kompleks, route groups, serta parallel routes.
MDN
Web Storage API
Fokus baca
- Perbedaan lifecycle localStorage dan sessionStorage.
- Penyimpanan browser bersifat synchronous dan dapat hilang atau dibersihkan user.
- Membatasi storage untuk preference atau data sementara yang aman.
Abaikan dulu
- Storage quota detail dan third-party iframe policy yang tidak relevan untuk feature ini.
Aksi setelah membaca
Pilih satu feature pada local React atau Next.js app. Buat tabel state/data dengan kolom owner, source of truth, refresh behavior, shareable URL, persistence, loading/error/empty/success, dan recovery. Pindahkan satu keputusan yang salah tempat, lalu jalankan typecheck serta manual test refresh, back/forward, dan recovery path yang terdampak.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- State strategy dimulai dari source of truth, lifecycle, refresh, shareability, dan recovery, bukan dari library yang ingin dipakai.
- Server data, URL state, local UI, browser persistence, dan backend persistence memiliki peran yang berbeda.
- Error perlu dibedakan dari loading dan empty, lalu memiliki recovery owner yang nyata.
- Global store hanya berguna ketika consumer serta lifecycle lintas tree benar-benar membutuhkannya.
- Berikutnya, Component API and Documentation menggunakan boundary ini untuk merancang props, content-driven rendering, dan usage example yang mudah dipahami tim.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: buat state course catalog dapat dijelaskan dari lifecycle-nya.