Kapan Menggunakan State Global atau Lokal
Terapkan prinsip kolokasi: simpan state sedekat mungkin dengan penggunanya, dan angkat hanya ketika beberapa komponen yang tidak berkaitan membutuhkannya.
Kapan Menggunakan State Global atau Lokal adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Pertanyaan tentang Lokasi Status
Setiap bagian status memiliki tempat yang optimal. Memilih lokasi yang salah dapat menyebabkan kesulitan akibat penerusan prop berantai atau kompleksitas status global yang tidak perlu. Prinsip panduannya: simpan status sedekat mungkin dengan komponen yang menggunakannya.
Status Komponen Lokal
Jika hanya satu komponen yang menggunakan status tersebut, status itu sebaiknya berada dalam useState/ref komponen tersebut. Tidak perlu membagikannya — simpan secara lokal. Ini adalah kasus yang paling sederhana dan paling umum.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Mengangkat Status
Jika dua komponen saudara membutuhkan status yang sama, angkat status tersebut ke leluhur bersama terdekat. Teruskan status itu sebagai props dan fungsi panggilan balik. Ini adalah pendekatan standar React/Vue sebelum menggunakan store global.
Konteks Bersama — Berbagi Tingkat Menengah
Jika status perlu dibagikan ke seluruh subtree tanpa penerusan prop berantai, Context (React) atau provide/inject (Vue) adalah alat yang tepat. Gunakan pendekatan ini untuk berbagi dalam cakupan sedang (sebuah halaman atau modul fitur).
Store Global — Status di Seluruh Aplikasi
Gunakan store global (Redux, Zustand, Pinia) untuk status yang: 1) diakses oleh banyak komponen yang tidak saling berkaitan, 2) perlu bertahan saat navigasi, 3) memiliki logika pembaruan yang kompleks, 4) bermanfaat untuk diperiksa melalui DevTools.
Contoh: Status Lokal
Status lokal tepat digunakan untuk: nilai bidang formulir, kondisi tooltip terbuka/tertutup, visibilitas modal, status saat kursor diarahkan, status animasi, dan indikator pemuatan yang bersifat lokal bagi satu komponen.
Contoh: Status yang Diangkat
Status yang diangkat tepat digunakan untuk: filter bersama yang digunakan oleh dua daftar saudara, tab terpilih dalam grup tab, dan data formulir yang dibagikan antara dua langkah.
Contoh: Context / Provide
Context tepat digunakan untuk: tema saat ini, pengguna yang terautentikasi, lokal/bahasa, tanda fitur, dan tumpukan notifikasi — hal-hal yang digunakan pada banyak tingkat kedalaman tetapi jarang diperbarui.
Contoh: Store Global
Store global tepat digunakan untuk: keranjang belanja, token autentikasi dan objek pengguna, antrean notifikasi (pesan muncul sebagai notifikasi singkat dari mana saja), serta data waktu nyata yang ditampilkan secara bersamaan oleh beberapa tampilan.
Status Server vs Status Klien
Data jaringan (yang diambil dari API) adalah kategori khusus: status server. Data ini memerlukan penanganan pemuatan/kesalahan, penyimpanan tembolok, dan invalidasi. React Query / SWR / TanStack Query mengelola status server sehingga store Anda dapat berfokus pada status klien yang sebenarnya.
Kesalahan Umum: Semua Hal dalam Store Global
Jangan menaruh semua status dalam store global "untuk berjaga-jaga". Status lokal lebih hemat, sederhana, dan mudah diuji. Penggunaan status global secara berlebihan menciptakan keterkaitan antar komponen yang seharusnya berdiri sendiri.
Kerangka Pengambilan Keputusan
Tanyakan: 1) Apakah komponen lain membutuhkan ini? Tidak → lokal. 2) Apakah komponen saudara terdekat membutuhkannya? Ya → angkat ke atas. 3) Apakah subtree komponen membutuhkannya? Ya → context/provide. 4) Apakah banyak komponen yang tidak saling berkaitan membutuhkannya, atau apakah status ini perlu diperiksa melalui DevTools? Ya → store global.
Pemeriksaan Singkat
Di mana Anda sebaiknya menyimpan status buka/tutup dari satu komponen akordeon?
Rangkuman: Lokasi Status
Prinsip: simpan status sedekat mungkin dengan komponen yang menggunakannya. Gunakan useState/ref lokal untuk status satu komponen. Angkat status untuk berbagi antar komponen saudara. Gunakan context/provide untuk berbagi di seluruh subtree. Gunakan store global untuk status di seluruh aplikasi dengan pembaruan yang kompleks. Status server (data API) sebaiknya berada dalam React Query/SWR, bukan dalam store global.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Kapan Menggunakan State Global atau Lokal” gratis?
Ya — teks lengkap “Kapan Menggunakan State Global atau Lokal” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Kapan Menggunakan State Global atau Lokal”?
Terapkan prinsip kolokasi: simpan state sedekat mungkin dengan penggunanya, dan angkat hanya ketika beberapa komponen yang tidak berkaitan membutuhkannya. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Kapan Menggunakan State Global atau Lokal” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Redux Toolkit: createSlice dan configureStore
- Zustand untuk State React yang Ringan
- Pinia untuk Vue: defineStore dan storeToRefs
- Kapan Menggunakan State Global atau Lokal