Dall'archivio script > HTML5

Eseguire operazioni con timeout in React

di Morgan PizziniMorgan Pizzini, in HTML5, JavaScript,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi