0Pricing
React Academy · Pelajaran

Memilih Lokasi State yang Tepat

Terapkan kerangka keputusan: state lokal, state yang diangkat, atau state global.

Memilih Lokasi State yang Tepat adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan menerapkan kerangka pengambilan keputusan praktis untuk menentukan apakah status sebaiknya berada dalam satu komponen, leluhur bersama, Konteks React, atau pustaka status global.

Langkah 1: Siapa yang Menggunakan Status Ini?

Pertama, tanyakan: komponen mana yang merender menggunakan status ini? Buat daftarnya. Jika hanya satu komponen yang menggunakannya, simpan status secara lokal di komponen tersebut.

Status Lokal

Status yang digunakan tepat oleh satu komponen berada di komponen tersebut bersama useState. Contohnya: apakah menu tarik-turun terbuka, nilai saat ini dari input terkontrol, dan apakah keterangan alat terlihat.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Langkah 2: Temukan Leluhur Bersama

Jika beberapa komponen memerlukan status tersebut, temukan leluhur bersama terdekatnya dalam pohon komponen. Pindahkan status ke sana dan teruskan ke bawah sebagai properti.

Status yang Diangkat (2–3 Tingkat)

Status yang dibagikan oleh 2–3 komponen pada tingkat bersarang yang sama merupakan kandidat yang baik untuk diangkat. Induk bersama memilikinya dan meneruskannya melalui properti.

Langkah 3: Apakah Penerusan Properti Terlalu Dalam?

Jika leluhur bersama berada 4 tingkat atau lebih di atas komponen pengguna, meneruskan properti melalui komponen perantara menimbulkan kerumitan. Pertimbangkan Konteks.

Status Konteks

Gunakan Konteks untuk kebutuhan lintas komponen yang diperlukan banyak komponen di seluruh pohon: pengguna terautentikasi saat ini, tema aktif, dan lokal yang dipilih. Hal-hal ini jarang berubah dan memiliki banyak komponen pengguna.

Langkah 4: Apakah Statusnya Kompleks atau Dibagikan Antarhalaman?

Jika status memiliki logika pembaruan yang kompleks, memerlukan undo/redo, harus dipertahankan selama navigasi, atau diakses di pohon komponen yang sepenuhnya terpisah, gunakan pustaka status khusus (Zustand, Redux).

Status Server Berbeda

Data yang diambil dari server adalah *status server*, bukan status antarmuka. Jangan menyimpannya dalam useState atau penyimpanan global—gunakan React Query, SWR, atau RTK Query yang menangani penyimpanan sementara, pengambilan ulang, dan status kesalahan secara otomatis.

Diagram Alur Pengambilan Keputusan

1 komponen pengguna → useState lokal. 2–3 komponen pengguna pada kedalaman yang serupa → angkat ke induk. Penerusan melalui 4 tingkat atau lebih → Konteks. Logika kompleks atau lintas pohon → Zustand/Redux. Data server → React Query/SWR.

Pemeriksaan Singkat

Lokasi status apa yang paling tepat untuk pengguna terautentikasi saat ini yang perlu diakses oleh banyak komponen di seluruh aplikasi besar?

Ringkasan

Sesuaikan lokasi status dengan komponen penggunanya: lokal untuk satu komponen, diangkat untuk beberapa komponen yang berdekatan, Konteks untuk banyak komponen di berbagai tingkat, pustaka status untuk status kompleks atau lintas pohon, dan React Query untuk data server.

Kursus Selesai

Selamat! Anda telah menyelesaikan **Mengangkat Status ke Atas & Solusi Penerusan Properti**. Kini Anda memiliki kerangka yang jelas untuk menentukan tempat status berada dan cara membagikannya dengan benar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memilih Lokasi State yang Tepat” gratis?

Ya — teks lengkap “Memilih Lokasi State yang Tepat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memilih Lokasi State yang Tepat”?

Terapkan kerangka keputusan: state lokal, state yang diangkat, atau state global. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 “Memilih Lokasi State yang Tepat” 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 React Academy ini?

Ya. Setiap pelajaran React 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

  1. Mengangkat State: Prinsip dan Contoh
  2. Prop Drilling: Kapan Menyulitkan dan Kapan Tidak
  3. Pola Komunikasi Antarsaudara
  4. Memilih Lokasi State yang Tepat
← Kembali ke React Academy