0Pricing
React Academy · Pelajaran

Mengangkat State: Prinsip dan Contoh

Pindahkan state bersama ke leluhur bersama terdekat dan teruskan melalui props.

Mengangkat State: Prinsip dan Contoh adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 mempelajari pola mengangkat status — memindahkan status bersama ke leluhur bersama terdekat agar komponen saudara tetap sinkron.

Masalah: Komponen Saudara Tidak Sinkron

Saat dua komponen saudara memerlukan data yang sama, menyimpan status terpisah di masing-masing komponen dapat menyebabkan galat sinkronisasi. Solusinya adalah memindahkan status ke induk bersama mereka.

Mengidentifikasi Leluhur Bersama

Temukan komponen terdekat yang menjadi induk bagi **kedua** komponen yang memerlukan data bersama. Pindahkan status ke sana dan teruskan sebagai properti.
function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Contoh Mengangkat Penghitung

Misalkan dua komponen menampilkan penghitung yang sama. Daripada mengelola count di masing-masing komponen, angkat status tersebut ke induknya. Keduanya menerima count sebagai properti dan memanggil callback onChange untuk memperbaruinya.
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Properti Callback untuk Pembaruan

Anak tidak dapat mengubah status induk secara langsung. Induk meneruskan callback, seperti `onChange`, sebagai properti. Anak memanggil callback tersebut saat ingin meminta perubahan status.

Terkontrol vs Tidak Terkontrol setelah Pengangkatan

Setelah status diangkat, anak yang sebelumnya memiliki status menjadi **komponen terkontrol** — anak menerima nilai saat ini dan onChange dari induknya. Induk menjadi satu-satunya sumber kebenaran.

Pengangkatan Multi-Tingkat

Terkadang Anda perlu mengangkat status beberapa tingkat ke atas dalam pohon. Jika status harus diangkat melewati banyak komponen perantara, pertimbangkan Context agar tidak perlu meneruskan properti melalui banyak tingkat.

Manfaat Mengangkat Status

Mengangkat status memberi Anda satu sumber kebenaran, membuat aliran data dapat diprediksi, selalu dari atas ke bawah, menyederhanakan penelusuran galat, dan memudahkan penambahan pengguna lain untuk status yang sama di kemudian hari.

Status Turunan dari Status yang Diangkat

Hitung nilai turunan dari status yang diangkat di dalam induk, lalu teruskan sebagai properti tambahan. Jangan pernah menduplikasi status — turunkan nilainya.
const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Saat Pengangkatan Menjadi Berlebihan

Jika Anda mendapati diri mengangkat status melalui 4 tingkat atau lebih, struktur pohon komponen mungkin keliru atau sudah waktunya menggunakan Context atau pustaka pengelolaan status.

Pemeriksaan Singkat

Apa pendekatan yang benar saat dua komponen saudara perlu berbagi bagian status yang sama?

Ringkasan

Angkat status ke leluhur bersama terdekat saat komponen saudara perlu menggunakannya bersama. Teruskan nilai saat ini ke bawah dan callback perubahan ke atas. Turunkan nilai daripada menduplikasi status.

Berikutnya

Pelajaran berikutnya: **Penerusan Properti: Kapan Menjadi Masalah & Kapan Tidak** — Anda akan mengidentifikasi rantai penerusan yang bermasalah dan memutuskan kapan rantai tersebut memerlukan solusi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengangkat State: Prinsip dan Contoh” gratis?

Ya — teks lengkap “Mengangkat State: Prinsip dan Contoh” 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 “Mengangkat State: Prinsip dan Contoh”?

Pindahkan state bersama ke leluhur bersama terdekat dan teruskan melalui props. 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 1 dari 4.

Berapa lama pelajaran “Mengangkat State: Prinsip dan Contoh” 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