Recuperare dati al montaggio
Recuperare JSON da un’API all’interno di useEffect, memorizzare la risposta nello stato e avviare il recupero una sola volta con un array delle dipendenze vuoto.
Recuperare dati al montaggio è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Il pattern di recupero dei dati
Il pattern standard di React per il recupero dei dati: 1) definire lo stato di caricamento, errore e dati; 2) recuperare i dati in useEffect con un array delle dipendenze vuoto []; 3) aggiornare lo stato nel callback; 4) eseguire il rendering in base allo stato.
Esempio completo
Un esempio completo che recupera gli utenti al montaggio, gestendo il caricamento e gli errori.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}Uso di async/await in useEffect
Il callback di useEffect non può essere direttamente async, perché restituirebbe una Promise che React interpreterebbe come una funzione di cleanup. Definisca invece una funzione async interna e la chiami immediatamente.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Verifica dello stato della risposta
fetch non genera eccezioni per gli errori HTTP, 4xx e 5xx: le genera solo in caso di errori di rete. Verifichi sempre response.ok e generi manualmente un'eccezione per le risposte errate.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Recupero dati al variare di una dipendenza
Aggiunga la dipendenza, ad esempio un ID proveniente dai parametri della route o dalle prop, all'array delle dipendenze dell'effetto. L'effetto viene eseguito nuovamente e recupera dati aggiornati ogni volta che la dipendenza cambia.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Richieste POST negli effetti
Gli effetti possono anche inviare richieste POST/PUT/DELETE, ma di solito queste vengono attivate da eventi, come l'invio di un modulo o il clic su un pulsante, non da effetti eseguiti al montaggio. Riservi gli effetti al caricamento dei dati e usi i gestori degli eventi per le mutazioni.
Hook useFetch personalizzato
Estragga il pattern recupero dati + caricamento + errore in un hook personalizzato, così da riutilizzarlo in più componenti.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Analisi sicura del JSON
Avvolga sempre res.json() in try/catch: un JSON non valido genera una SyntaxError. Il catch esterno la gestirà, ma conoscerne l'origine facilita il debugging.
Configurazione dell'URL di base dell'API
Non inserisca direttamente nel codice gli URL delle API. Usi variabili d'ambiente, come import.meta.env.VITE_API_URL, per l'URL di base. Crei un file api.ts centrale con un wrapper fetch configurato.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Quando passare a React Query
I pattern di recupero manuale dei dati sono adatti ai casi semplici. Quando servono caching, recupero dati in background, paginazione o mutazioni, passi a React Query (TanStack Query): gestisce tutti questi pattern in modo affidabile.
Visualizzazione di uno skeleton di caricamento
Invece di uno spinner, mostri uno skeleton UI che rispecchi la forma del contenuto caricato. Questo riduce il tempo di caricamento percepito e impedisce gli spostamenti del layout.
Verifica rapida
Perché non è possibile rendere direttamente async il callback di useEffect?
Riepilogo: recupero dei dati in useEffect
Definisca lo stato di caricamento, errore e dati. Recuperi i dati in useEffect con un array delle dipendenze vuoto []. Definisca una funzione async interna: non renda async il callback. Verifichi sempre res.ok. Aggiunga l'URL o l'ID alle dipendenze per il recupero dinamico. Estragga il pattern in un hook personalizzato useFetch per riutilizzarlo. Prenda in considerazione TanStack Query per il recupero dei dati in produzione.
Domande Frequenti
La lezione «Recuperare dati al montaggio» è gratuita?
Sì — il testo completo di «Recuperare dati al montaggio» è 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 «Recuperare dati al montaggio»?
Recuperare JSON da un’API all’interno di useEffect, memorizzare la risposta nello stato e avviare il recupero una sola volta con un array delle dipendenze vuoto. 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 2 di 4.
Quanto tempo richiede la lezione «Recuperare dati al montaggio»?
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
- Basi di useEffect: dipendenze e pulizia
- Recuperare dati al montaggio
- Gestire gli stati di caricamento e di errore
- AbortController per la pulizia