Qual è la differenza tra props e state?

Question

Accepted Answer

Entrambi contengono dati che influenzano ciò che un componente renderizza, ma differiscono in **chi possiede i dati** e **se può essere modificato**. - **props** vengono passati *dentro* un componente dal suo genitore. Sono **sola lettura** — il componente non deve mai modificarli. - **state** è di proprietà e gestito *dentro* il componente. Può cambiare nel tempo e modificarlo attiva un **re-render**. ## Perché è importante ```jsx // `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 ( ); } // Parent decides the step and passes it down: ``` I dati fluiscono **verso il basso** (genitore → figlio tramite props) e i cambiamenti fluiscono **verso l'alto** (il figlio chiede al genitore di cambiare qualcosa tramite una callback prop come `onChange`). Questo flusso unidirezionale è ciò che rende le app React prevedibili. ## Come decidere quale usare - Proviene dall'alto e il componente non dovrebbe modificarlo → **prop**. - Il componente deve modificarlo nel tempo → **state**. - Mutare props (`props.x = 1`) è un bug — React non farà re-render e hai rotto la proprietà del genitore. Per "modificare una prop", chiama una callback che il genitore ti ha dato in modo che il genitore aggiorni il suo state e trasmetta un nuovo valore verso il basso.