Apa perbedaan antara props dan state?

Keduanya menyimpan data yang mempengaruhi apa yang dirender komponen, tetapi mereka berbeda dalam siapa yang memiliki data dan apakah itu dapat berubah.

• props dilewatkan ke dalam komponen dari komponen induknya. Mereka hanya baca — komponen tidak boleh pernah memodifikasinya.
• state dimiliki dan dikelola di dalam komponen. Ia dapat berubah seiring waktu, dan mengubahnya memicu re-render.

Mengapa ini penting

// `step` is a PROP — given by the parent, the child only reads it.
// `count` is STATE — owned here, changes on click, causes a re-render.
function Counter({ step }) {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + step)}>
      {count}
    </button>
  );
}

// Parent decides the step and passes it down:
<Counter step={5} />

Data mengalir ke bawah (induk → anak melalui props) dan perubahan mengalir ke atas (anak meminta induk untuk mengubah sesuatu melalui callback prop seperti onChange). Aliran satu arah inilah yang membuat aplikasi React dapat diprediksi.

Cara memutuskan mana yang digunakan

• Berasal dari atas dan komponen tidak boleh mengubahnya → prop.
• Komponen harus mengubahnya seiring waktu → state.
• Memutasi props (props.x = 1) adalah bug — React tidak akan re-render dan Anda telah merusak kepemilikan induk. Untuk "mengubah prop", panggil callback yang diberikan induk kepada Anda sehingga induk memperbarui state-nya sendiri dan meneruskan nilai baru ke bawah.