In React, diversamente da altri framework JavaScript, la gestione di operazioni che vengono effettuate utilizzando il metodo setInterval può non essere così banale, dato che dobbiamo lavorare con lo State presente in ogni componente.
Il primo esempio che mostriamo è quello che non funzionerà ed il motivo è semplice: alla prima esecuzione la versione corrente dello state verrà persistito all'interno della funzione, facendo si che ogni operazione successiva non risenta di un eventuale cambio di parametri.
const [miaVariabile, setMiaVariabile] = useState(0); // con un intervallo di un secondo effettuo una chiamata API, // la quale mi fornirà il valore da utilizzare all'iterazione successiva setInterval(async () => { // il valore di miaVariabile sarà sempre 0 const result = await get(`api/mio-endpoint/${miaVariabile}`); setMiaVariabile(result); }, 1000);
Per motivi infrastrutturali e per non lasciare timer attivi nel momento in cui il componente viene dismesso, è buona norma inserire il timer all'interno dell'hook useEffect. Operazione che non risolve il problema in origine, per il quale dobbiamo apportare una modifica al codice.
React.useEffect(() => { const intervalId = setInterval(() => { // il codice applicativo verrà inserito in una callback da fornire come parametro in ingresso al setState // la quale ci fornirà il valore dello state corrente setMiaVariabile(valoreCorrente=>{ return valoreCorrente+1 }); }, 1000); // il timer verrà disposto insieme al componente return () => { clearInterval(intervalId); }; // fornendo [] garantiremo che la funzione verrà eseguita solo all'inizializzazione del componente }, []);
E se volessimo prendere l'ultima versione di uno state e aggiornarne uno differente? Come interpretabile dallo snippet precedente, basterà inserirlo all'interno delle parentesi quadre dello useEffect. In questo modo, quando la variabile su cui abbiamo posto l'attenzione varierà, tutta la funzione verrà rieseguita.
const [miaVariabile, setMiaVariabile] = useState(0); const [altraVariabile, setAltraVariabile] = useState(0); React.useEffect(() => { const intervalId = setInterval(async () => { const result = await get(`api/mio-endpoint/${altraVariabile}`); setMiaVariabile(result); }, 1000); return () => { clearInterval(intervalId); }; }, [altraVariabile]);
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Azure Cosmos DB con i vettori
Scrivere selettori CSS più semplici ed efficienti con :is()
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Configurare lo startup di applicazioni server e client con .NET Aspire
Utilizzare una qualunque lista per i parametri di tipo params in C#
Migliorare la sicurezza dei prompt con Azure AI Studio
Migliorare l'organizzazione delle risorse con Azure Policy
Recuperare l'ultima versione di una release di GitHub
Gestione dell'annidamento delle regole dei layer in CSS
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Utilizzare Copilot con Azure Cosmos DB
Creare agenti facilmente con Azure AI Agent Service