Jul 29, 2025

Hooks React Spiegati Semplice, useState e useEffect

Se hai iniziato a lavorare con React, avrai sicuramente sentito parlare degli Hooks. Introdotti con React 16.8, gli Hooks hanno rivoluzionato il modo in cui gestiamo lo stato e gli effetti collaterali nei componenti funzionali, rendendo il codice più pulito, più leggibile e più facile da riutilizzare rispetto ai componenti basati su classi.

Dimentica this.setState, componentDidMount o componentDidUpdate. Con gli Hooks, puoi scrivere l'intera tua applicazione usando solo funzioni JavaScript!

In questo articolo, ci concentreremo sui due Hooks più fondamentali e utilizzati: useState e useEffect.

Cos'è un Hook?

Un Hook è una funzione speciale che ti permette di "agganciarti" (hook into) alle funzionalità di React (come lo stato e il lifecycle) direttamente dai tuoi componenti funzionali.

Le regole per gli Hooks sono semplici ma cruciali:

Chiamali solo al top-level: Non chiamare gli Hooks all'interno di loop, condizioni o funzioni annidate.
Chiamali solo dai componenti React (o dai Custom Hooks): Non chiamare gli Hooks da normali funzioni JavaScript.

Ora, entriamo nel vivo con i due Hooks principali.

1. `useState`: Gestire lo Stato nei Componenti Funzionali

useState è l'Hook che ti permette di aggiungere uno stato locale ai tuoi componenti funzionali. È l'equivalente di this.state e this.setState che trovavi nei componenti a classe, ma molto più semplice da usare.

Come Funziona `useState`

useState è una funzione che prende un argomento: il valore iniziale dello stato. Restituisce un array con due elementi:

La variabile di stato corrente.
Una funzione per aggiornare quella variabile di stato.

Sintassi:

import React, { useState } from "react";

function Counter() {
	// Dichiarazione di una variabile di stato 'count' con valore iniziale 0
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>Hai cliccato {count} volte</p>
			<button onClick={() => setCount(count + 1)}>Cliccami</button>
			<button onClick={() => setCount(0)}>Reset</button>
		</div>
	);
}

Spiegazione:

const [count, setCount] = useState(0);
- Dichiara una variabile di stato chiamata count (il nome che vuoi dare al tuo pezzo di stato).
- Il suo valore iniziale è 0.
- Dichiara una funzione setCount (per convenzione set + il nome della variabile di stato) che userai per aggiornare count.
Quando chiami setCount, React ri-renderizza il componente e la variabile count avrà il nuovo valore.

Aggiornamenti dello Stato Basati sul Valore Precedente

A volte, il nuovo stato dipende dal valore precedente dello stato. In questi casi, è buona pratica passare una funzione alla funzione di aggiornamento dello stato (setCount nell'esempio), invece di un valore diretto.

// ...all'interno del componente Counter
<button onClick={() => setCount((prevCount) => prevCount + 1)}>
	Incrementa
</button>

Questo è più sicuro, specialmente quando gli aggiornamenti dello stato sono asincroni, perché prevCount è garantito essere il valore più aggiornato.

2. `useEffect`: Gestire gli Effetti Collaterali

useEffect è l'Hook che ti permette di eseguire "effetti collaterali" nei componenti funzionali. Gli effetti collaterali sono operazioni che avvengono all'esterno del flusso di rendering normale di React, come:

Fetching di dati da un'API.
Manipolazione diretta del DOM.
Iscrizione o disiscrizione a eventi esterni (es. eventi del browser, WebSocket).
Impostazione di timer o intervalli.

Pensa a useEffect come una combinazione di componentDidMount, componentDidUpdate e componentWillUnmount dei componenti a classe.

Come Funziona `useEffect`

useEffect prende due argomenti:

Una funzione di "effetto": Questa funzione viene eseguita dopo ogni render del componente (per default).
Un array di dipendenze (dependency array): Questo è l'argomento più importante per controllare quando l'effetto viene eseguito.

Sintassi di Base:

import React, { useState, useEffect } from "react";

function DataFetcher() {
	const [data, setData] = useState(null);
	const [loading, setLoading] = useState(true);

	// Effetto: Fetch dei dati al caricamento del componente
	useEffect(() => {
		console.log("Fetching dati...");
		fetch("https://jsonplaceholder.typicode.com/todos/1")
			.then((response) => response.json())
			.then((json) => {
				setData(json);
				setLoading(false);
			});
	}, []); // Dipendenza vuota: l'effetto viene eseguito solo al mount (una volta)

	if (loading) {
		return <p>Caricamento dati...</p>;
	}

	return (
		<div>
			<h3>Dati caricati:</h3>
			<pre>{JSON.stringify(data, null, 2)}</pre>
		</div>
	);
}

Spiegazione dell'Array di Dipendenze:

Il secondo argomento di useEffect, l'array di dipendenze, controlla quando l'effetto viene rieseguito:

[] (Array Vuoto): L'effetto viene eseguito solo una volta dopo il primo render del componente (equivalente a componentDidMount). È ideale per il fetching iniziale dei dati o per l'impostazione di listener globali.
Nessun Array (Omesso): L'effetto viene eseguito dopo ogni render del componente. Questo è raro e spesso porta a loop infiniti o problemi di performance.
[prop1, state1] (Array con Dipendenze): L'effetto viene eseguito solo quando una delle dipendenze specificate cambia tra un render e l'altro. Questo è il caso d'uso più comune per aggiornare l'UI in base a cambiamenti di props o stato.
```
useEffect(() => {
	document.title = `Titolo: ${count}`;
}, [count]); // L'effetto viene eseguito solo quando 'count' cambia
```

Funzione di Pulizia (Cleanup Function)

Molti effetti collaterali richiedono una "pulizia" per evitare perdite di memoria o comportamenti indesiderati. Ad esempio, se iscrivi un listener di eventi o imposti un timer, devi disiscriverti o cancellare il timer quando il componente si smonta o l'effetto viene rieseguito.

Puoi farlo restituendo una funzione dalla funzione di effetto. Questa funzione di pulizia verrà eseguita:

Prima che l'effetto venga rieseguito (se le dipendenze cambiano).
Quando il componente si smonta (equivalente a componentWillUnmount).

Esempio di Cleanup:

function TimerComponent() {
	const [seconds, setSeconds] = useState(0);

	useEffect(() => {
		const intervalId = setInterval(() => {
			setSeconds((prevSeconds) => prevSeconds + 1);
		}, 1000);

		// Funzione di pulizia
		return () => {
			console.log("Pulisco il timer...");
			clearInterval(intervalId);
		};
	}, []); // L'effetto parte una volta, e la pulizia avviene allo smontaggio
	// o se l'effetto dovesse mai ripartire (ma non accade con []).

	return <p>Secondi trascorsi: {seconds}</p>;
}

Conclusione

useState e useEffect sono i pilastri degli Hooks di React, permettendoti di aggiungere stato e gestire effetti collaterali nei tuoi componenti funzionali in modo dichiarativo e pulito. Comprendere a fondo questi due Hooks è il primo passo cruciale per sfruttare appieno il potenziale di React e scrivere codice più moderno, manutenibile e scalabile. Inizia a sperimentare con loro e vedrai quanto possono semplificare lo sviluppo delle tue applicazioni!