Kedua-duanya menyimpan data yang mempengaruhi apa yang diberikan komponen, tetapi ia berbeza dalam siapa yang memiliki data dan sama ada ia boleh berubah.
// `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 (ibu bapa → anak melalui props) dan perubahan mengalir ke atas (anak meminta ibu bapa mengubah sesuatu melalui callback prop seperti onChange). Aliran satu arah inilah yang membuat aplikasi React dapat diramalkan.
props.x = 1) adalah pepijat — React tidak akan memberikan semula dan anda telah memecahkan pemilikan ibu bapa. Untuk "mengubah prop", panggil callback yang ibu bapa berikan kepada anda supaya ibu bapa mengemas kini statenya sendiri dan meluluskan nilai baru ke bawah.