Reattività degli State in React

Ora diamo un'occhiata a come funziona la reattività. Fa sì che quando uno state cambia, le modifiche siano istantaneamente visualizzate sullo schermo.

Guardiamo un esempio. Supponiamo di avere uno state con il nome di un prodotto:

const [name, setName] = useState('prod');

Visualizziamo il nome del prodotto nel markup:

return <div>
	<span>{name}</span>
</div>;

Creiamo ora un pulsante, al click del quale il nostro state cambierà:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Nel gestore del click usiamo la funzione setName, per impostare un nuovo nome al prodotto:

function clickHandler() {
	setName('xxxx');
}

Mettiamo insieme tutto il nostro codice. Risulterà che dopo aver cliccato il pulsante il testo cambierà istantaneamente nel nuovo valore:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

L'uso di singole funzioni gestore non è obbligatorio. Si può usare una funzione anonima freccia:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Sono dati gli state con il nome e il cognome dell'utente. Visualizzateli nel markup. Create dei pulsanti per modificare questi state.