Local State
Menjaga modal, input, toggle, dan detail interaksi dekat component yang memakai state tersebut.
Tujuan belajar
- Memilih owner terdekat untuk state UI sementara
- Membedakan state yang perlu diangkat dari state yang cukup colocated
- Menghindari Context atau global store untuk satu interaksi component
- Membuat state UI lebih mudah dihapus, diubah, dan diuji bersama component-nya
Isi lesson
6 blok- 1.Letakkan state sedekat mungkin dengan consumer-nyaBelum selesaiWajib
- 2.Panel filter memiliki toggle-nya sendiriBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Cek pemahamanBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Letakkan state sedekat mungkin dengan consumer-nya
WajibState modal, disclosure, input sementara, selected tab, dan toggle biasanya tidak perlu diketahui seluruh page. Menaruhnya pada component terdekat membuat code menjawab pertanyaan dasar dengan cepat: siapa yang mengubah state, UI mana yang merespons, dan kapan state hilang. Ini juga membatasi rerender, coupling, dan jumlah file yang harus dibaca saat behavior kecil berubah.
State perlu diangkat hanya ketika beberapa component benar-benar harus tetap sinkron atau parent perlu menentukan hasilnya. Bahkan dalam situasi itu, angkat ke common parent terdekat, bukan langsung ke global store. Context cocok untuk concern lintas tree yang stabil seperti theme atau session data yang memang dipakai banyak area; ia bukan jalan pintas agar props tidak terlihat. Mulai local, lalu pindahkan hanya ketika consumer dan lifecycle membuktikan kebutuhan baru.
Bagian ini memengaruhi progres lesson.
Panel filter memiliki toggle-nya sendiri
Wajibimport { useState } from "react";
type CourseFilterPanelProps = {
initialQuery: string;
};
export function CourseFilterPanel({ initialQuery }: CourseFilterPanelProps) {
const [isOpen, setIsOpen] = useState(false);
return (
<section>
<button type="button" onClick={() => setIsOpen((current) => !current)}>
{isOpen ? "Tutup filter" : "Buka filter"}
</button>
{isOpen ? <p>Filter untuk: {initialQuery}</p> : null}
</section>
);
}Hanya CourseFilterPanel yang membutuhkan isOpen, maka state tinggal di sana. initialQuery dapat datang dari URL state atau parent sebagai input; panel hanya mengatur apakah control detail sedang terbuka. Jika beberapa component perlu membuka panel yang sama, pindahkan state ke parent yang menaungi mereka dan tetap jaga API event-nya kecil.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususKeep course panel state local
Pindahkan toggle panel filter ke CourseFilterPanel agar parent tidak perlu menerima serta meneruskan detail UI sementara.
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
Pilih satu state UI pada project React atau Next.js lokal, misalnya modal, dropdown, filter panel, selected tab, atau input pencarian. Jelaskan component yang benar-benar membaca dan mengubah state tersebut, apakah ada sibling yang harus sinkron, serta owner paling kecil yang kamu pilih. Sebutkan alasan state ini tidak perlu langsung memakai Context atau global store. Jika state perlu diangkat, jelaskan common parent terdekatnya.
Tulis draft dulu sebelum menandai writing practice selesai.
0/500 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Kapan isOpen sebuah dialog paling tepat diangkat dari Dialog component ke parent?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Local UI state dimulai dekat component yang membaca dan mengubahnya.
- Angkat state ke common parent terdekat hanya ketika consumer perlu sinkron.
- Context dan global store bukan pengganti keputusan ownership yang jelas.
- Colocation membuat interaksi kecil lebih mudah diuji, diubah, dan dihapus.
- Berikutnya, kita menentukan state mana yang memang perlu bertahan setelah refresh dan di mana ia disimpan.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Letakkan state sedekat mungkin dengan consumer-nya.