Che cos'è lo stato?

Finora tutto era statico: i dati entravano, ne usciva una pagina, niente cambiava mai. Le app reali ricordano le cose che cambiano: il conteggio dei Mi piace, un menu aperto, il testo in una casella di ricerca. Questa memoria si chiama stato.

React fornisce lo stato ai componenti tramite l’hook useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Una riga, tre elementi:

• count: il valore corrente
• setCount: la funzione che lo modifica
• useState(0): il valore iniziale

La regola d’oro: non assegnare mai direttamente allo stato. count = 5 modifica una variabile che React non monitora. setCount(5) modifica lo stato e riesegue il rendering del componente. È questo nuovo rendering che aggiorna lo schermo.