Props vs State

Props vs State — Apa Bedanya?

Ini adalah salah satu konsep paling penting di React. Memahami perbedaan props dan state adalah kunci untuk membangun aplikasi yang benar.

Props — Data dari Luar

• Dikirim dari komponen induk ke anak
• Bersifat read-only — komponen anak tidak bisa mengubahnya
• Digunakan untuk konfigurasi dan penerusan data
• Tidak bisa berubah dari dalam komponen yang menerimanya

State — Data Internal Komponen

• Dimiliki dan dikelola oleh komponen itu sendiri
• Bisa berubah menggunakan fungsi setState atau hook useState
• Setiap perubahan state menyebabkan komponen re-render
• Digunakan untuk data yang berubah seiring waktu (input form, toggle, counter)

Contoh Perbandingan

import { useState } from "react";

function Counter({ initialCount }) {     // initialCount = props
  const [count, setCount] = useState(initialCount); // count = state

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// Penggunaan:
<Counter initialCount={0} />

Aturan sederhana: Jika data perlu berubah dan UI harus terupdate, gunakan state. Jika data berasal dari luar komponen, gunakan props.