Lifting State Up & Aliran Data

Masalah: dua komponen butuh data yang sama

Bayangkan Tampilan (menampilkan jumlah) dan Tombol (menambah jumlah). Kalau masing-masing punya state sendiri, mereka tidak akan sinkron. Solusinya: angkat state ke induk terdekat (lifting state up).

Langkah

1. Pindahkan state ke komponen induk bersama.
2. Kirim nilai ke anak lewat props.
3. Kirim function pengubah ke anak lewat props (callback).

function Tampilan({ jumlah }) {
  return <h2 className="nilai">{jumlah}</h2>;
}

function Tombol({ onTambah }) {
  return <button className="plus" onClick={onTambah}>+1</button>;
}

function App() {
  const [jumlah, setJumlah] = useState(0);   // state di induk

  return (
    <div>
      <Tampilan jumlah={jumlah} />
      <Tombol onTambah={() => setJumlah(jumlah + 1)} />
    </div>
  );
}

Anak menjadi komponen presentasi yang sederhana: hanya menampilkan props dan memanggil callback.

Aliran data satu arah

• Data turun (induk → anak) lewat props.
• Aksi naik (anak → induk) lewat callback.

Inilah yang membuat aplikasi React mudah dipahami: untuk tahu dari mana sebuah data berasal, telusuri ke atas sampai menemukan state-nya.

Di mana state sebaiknya diletakkan?

Taruh di komponen terdekat yang menjadi induk dari semua komponen yang membutuhkannya. Jangan terlalu tinggi (render ulang berlebih) dan jangan terlalu rendah (tidak bisa dibagikan).

Prop drilling

Jika data harus melewati banyak tingkat komponen yang tidak membutuhkannya, itu disebut prop drilling. Solusi: Context (bab 19) atau library state global.

Contoh: filter dan daftar

App menyimpan kataKunci; KolomCari mengubahnya; DaftarProduk menyaring berdasarkan kata kunci. Kedua anak berbagi satu sumber data.

Single source of truth

Setiap potongan data sebaiknya hanya punya satu pemilik. Duplikasi state hampir selalu menyebabkan bug ketidaksinkronan.