Frontend Academy · Lezione

Hook useState: stato e re-render

Chiamare useState per aggiungere stato locale a un componente, aggiornarlo con la funzione setter e comprendere quando e perché React esegue nuovamente il rendering.

Lezione 3 di 413 passaggi

Hook useState: stato e re-render è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Che cos'è lo stato?

Lo stato è un dato che cambia nel tempo e deve causare l'aggiornamento dell'interfaccia utente quando cambia. A differenza delle variabili normali, le modifiche allo stato attivano un nuovo rendering del componente React con il nuovo valore.

Sintassi di useState

useState(initialValue) restituisce una tupla: il valore corrente e una funzione setter. La destrutturi immediatamente.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

TypeScript: tipizzazione di useState

TypeScript deduce il tipo dal valore iniziale. Quando il valore iniziale è ambiguo, ad esempio null o un array vuoto, aggiunga un parametro di tipo esplicito.

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

Nuovo rendering al cambio di stato

La chiamata alla funzione setter pianifica un nuovo rendering. React richiama la funzione del componente con il nuovo valore dello stato. Il JSX restituito sostituisce il rendering precedente nel DOM virtuale.

Gli aggiornamenti dello stato sono asincroni

Gli aggiornamenti dello stato vengono raggruppati e applicati prima del rendering successivo, non immediatamente. Non legga lo stato aggiornato nello stesso gestore di eventi: il nuovo valore non è disponibile fino al rendering successivo.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

Aggiornamenti funzionali

Quando il nuovo stato dipende da quello precedente, utilizzi la forma funzionale del setter. In questo modo si evitano i bug causati da closure non aggiornate.

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

Stato con oggetti

Quando lo stato è un oggetto, crei sempre un nuovo oggetto: non modifichi quello esistente. React confronta gli oggetti per riferimento; le mutazioni non attivano nuovi rendering.

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

Più variabili di stato

Chiami useState più volte per variabili di stato indipendenti. È più chiaro rispetto a un unico grande oggetto di stato quando i valori non cambiano insieme.

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

Inizializzazione lazy

Se lo stato iniziale richiede un calcolo costoso, passi una funzione a useState. Questa viene eseguita solo al primo rendering, non a ogni nuovo rendering.

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

Quando non usare lo stato

Non tutte le variabili devono essere gestite come stato. I valori derivati (total = items.reduce(…)) devono essere calcolati durante il rendering, non memorizzati nello stato. Lo stato derivato dalle props è solitamente un segnale di overengineering.

Sollevamento dello stato

Quando due componenti fratelli devono condividere lo stato, lo sollevi al loro antenato comune e lo passi verso il basso come props. Questo è il modello fondamentale per la gestione dello stato in React, prima di ricorrere a context o a uno store.

Verifica rapida

Perché si dovrebbe utilizzare la forma funzionale setCount(prev => prev + 1) invece di setCount(count + 1)?

Rispondi nella lezione interattiva

Riepilogo: useState

useState restituisce [value, setter]. Il valore iniziale determina il tipo, oppure si può utilizzare un generico esplicito. Il setter attiva un nuovo rendering. Utilizzi gli aggiornamenti funzionali quando il nuovo stato dipende da quello precedente. Per gli oggetti, utilizzi sempre lo spread per creare nuovi oggetti e non modifichi mai quelli esistenti. Utilizzi l'inizializzazione lazy per i calcoli costosi. Sollevi lo stato agli antenati comuni quando i componenti fratelli devono condividerlo.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 41
Lezioni: 163

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Hook useState: stato e re-render» è gratuita?

Sì — il testo completo di «Hook useState: stato e re-render» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Hook useState: stato e re-render»?

Chiamare useState per aggiungere stato locale a un componente, aggiornarlo con la funzione setter e comprendere quando e perché React esegue nuovamente il rendering. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Hook useState: stato e re-render»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy