Come funzionano props e state in React Native?

Question

Accepted Answer

**Props** e **state** sono concetti fondamentali di React che funzionano in modo identico in React Native: **props** passano dati in un componente (input di sola lettura), mentre **state** contiene dati che possono cambiare nel tempo (attivando re-render). Comprenderli è fondamentale. ## Props — dati passati (sola lettura) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — dati che cambiano (via useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State è dati interni e modificabili; aggiornarli (tramite il setter da `useState`) attiva un re-render — il modo in cui l'UI riflette i cambiamenti. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## Perché è importante Comprendere props e state è fondamentale in React Native perché sono **concetti fondamentali di React centrali a come i componenti funzionano e come gli UI si aggiornano**, quindi è conoscenza imprescindibile. **Props** (dati di sola lettura passati in un componente dal suo parent, scorrendo verso il basso nell'albero dei componenti) sono il modo in cui i componenti ricevono configurazione e dati dall'esterno, abilitando componenti riutilizzabili e componibili. **State** (dati interni e modificabili gestiti tramite l'hook `useState`, dove aggiornarli attiva un re-render) è come i componenti mantengono e rispondono a dati che cambiano nel tempo (input dell'utente, toggle, dati recuperati) — il meccanismo tramite il quale gli UI riflettono i cambiamenti. Comprendere la **distinzione** — props passati e di sola lettura (per dati/configurazione esterni) rispetto a state interno e modificabile (per dati che cambiano, guidando re-render) — e il principio che **i dati scorrono verso il basso via props mentre i cambiamenti di state guidano gli aggiornamenti dell'UI** è fondamentale per costruire app React Native (e React) correttamente. Questi sono esattamente gli stessi concetti di React per web, quindi comprenderli si trasferisce direttamente ed è essenziale per chiunque costruisca componenti React Native. Ottenere props e state corretti (passare dati via props, gestire dati mutevoli con state, comprendere il flusso di dati unidirezionale) è centrale per componenti funzionali e corretti. Poiché props e state sono centrali a come i componenti React Native (e React) funzionano — ricevere dati (props) e gestire il cambiamento (state) per guidare gli aggiornamenti dell'UI — e comprenderli è fondamentale per costruire correttamente qualsiasi app React Native, comprendere props e state è conoscenza React Native essenziale e fondamentale — concetti fondamentali che ogni sviluppatore React Native deve comprendere, identici a React web (quindi la conoscenza si trasferisce), e fondamentali per costruire componenti che ricevono dati e rispondono al cambiamento, i meccanismi di base dello sviluppo dell'UI in React Native.