Beiden bevatten data die van invloed is op wat een component weergeeft, maar zij verschillen in wie de eigenaar van de data is en of deze kan veranderen.
// `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 stroomt naar beneden (parent → child via props) en wijzigingen stromen naar boven (child vraagt de parent iets te veranderen via een callback prop zoals onChange). Deze eenrichtingsverkeer is wat React-apps voorspelbaar maakt.
props.x = 1) is een bug — React zal niet opnieuw renderen en je hebt het eigenaarschap van de parent verbroken. Om "een prop te wijzigen" roep je een callback aan die de parent je heeft gegeven, zodat de parent zijn eigen state bijwerkt en een nieuwe waarde naar beneden doorgeeft.