Props zijn inputs die doorgegeven worden aan een component door zijn parent (alleen-lezen vanuit het perspectief van het child). State is data die een component eigenhandig eigenaar is en intern beheert (het kan deze veranderen). Het onderscheid: props komen van buiten en veranderen niet binnen de component; state is intern en mutabel.
() {
;
}
< name= />
Props stromen omlaag van parent naar child. Het child leest ze maar kan ze niet veranderen — om een prop's waarde te veranderen, moet de parent een nieuwe doorgeven.
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State wordt binnen de component aangemaakt en beheerd; de component verandert het (via setCount/setState), en het veranderen ervan triggert een re-render.
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
De state van één component wordt vaak aan een child als prop doorgegeven. State omhoog tillen en omlaag doorgeven is exact dit patroon — de parent eigenaar de state, children ontvangen het als props.
Het state-vs-props onderscheid is fundamenteel voor component-gebaseerde frameworks.
Het defineert data-eigenaarschap en -stroom: props zijn externe, alleen-lezen configuratie (data omlaag); state is interne, mutabele data die de component beheert.
Het verwarren ervan — props muteren, of props naar state dupliceren — veroorzaakt klassieke bugs.
Begrijpen dat data omlaag stroomt als props terwijl elke component zijn eigen state eigenhandig is, is de basis van React/Vue/Angular component-ontwerp.