Props sono input passati a un componente dal suo genitore (read-only dal punto di vista del figlio). State è un dato che un componente possiede e gestisce internamente (può modificarlo). La distinzione: le props provengono dall'esterno e non cambiano all'interno del componente; lo state è interno e mutabile.
() {
;
}
< name= />
Le props fluiscono verso il basso dal genitore al figlio. Il figlio le legge ma non può modificarle — per cambiare il valore di una prop, il genitore deve passarne una nuova.
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
}
Lo state è creato e controllato all'interno del componente; il componente lo modifica (tramite setCount/setState), e modificarlo attiva un 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
}
Lo state di un componente viene spesso passato a un figlio come prop. Sollevare lo state e passarlo verso il basso è esattamente questo pattern — il genitore possiede lo state, i figli lo ricevono come props.
La distinzione state-vs-props è fondamentale nei framework basati su componenti.
Definisce la proprietà dei dati e il flusso: le props sono configurazione esterna, read-only (dati verso il basso); lo state è dato interno e mutabile che il componente gestisce.
Confonderli — mutare le props, o duplicare le props nello state — causa bug classici.
Capire che i dati fluiscono verso il basso come props mentre ogni componente possiede il proprio state è la base della progettazione dei componenti in React/Vue/Angular.