Esegui attività asincrone con useEffect in modo pulito e sicuro

Dalla chiamata di un'API per impostare un ritardo di timeout, sono sicuro che ti sei già chiesto come farlo correttamente quando si utilizza l'hook React useEffect. Se sembra ancora sfocato, allora questo articolo è per te. In caso contrario, potresti almeno imparare un approccio diverso per portare a termine il lavoro o sentirti più sicuro mentre lo fai.

Presenterò 3 modi per farlo in modo sicuro e ordinato. Ma prima, voglio mostrare cosa NON dovresti fare.

Cosa NON dovresti fare ❌

Non eseguire l'attività asincrona direttamente in useEffect, invece, racchiude SEMPRE l'attività asincrona in una funzione e chiamala solo da useEffect.

Ecco un esempio di cosa NON dovresti fare:

useEffect(async () => {
   await getData();
},[]);

Inoltre, fare ciò che ha mostrato questo esempio BAD, porterebbe a un errore React:

I callback degli effetti sono sincroni per prevenire le condizioni di gara.

Bene, ora siamo al sicuro per passare alle buone pratiche ⬇️

1. Definizione della funzione asincrona all'interno dell'hook

Se intendi eseguire un'attività asincrona, ad esempio ottenere dei dati da un'API, e aggiornare lo stato di caricamento del tuo componente, devi definire la funzione all'interno dell'hook e poi chiamarla:

useEffect(() => {
async function getData() {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
   }
getData();
},[]);

2. Definizione della funzione asincrona al di fuori dell'hook

Se si prevede di riutilizzare la funzione asincrona definita, una buona idea è definirla nel corpo del componente funzionale, avvolto useCallbackdall'hook. Controlla:

const getData = useCallback(() => {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
}, [])
useEffect(() => {
getData()
},[getData])

3. Impostazione di un intervallo o di un timeout

I 2 esempi precedenti erano principalmente incentrati sul recupero dei dati e sull'aggiornamento dello stato dei componenti. Questo mostra anche uno scenario comune per le attività asincrone all'interno di useEffect che sta impostando un intervallo o un timeout.

Il trucco è cancellare SEMPRE il timeout e l'intervallo impostato nel file useEffect.

Impostazione di un timeout

useEffect(() => {
const timeout = setTimeout(() => {
     // do something
   }, 100)
return () => {
      clearTimeout(timeout);
   }
},[])

useEffect(() => {
const interval = setInterval(() => {
       // do something
  }, 100)
return () => {
      clearInterval(interval);
  }
},[])

Gli esempi sopra ti copriranno per il 99,99% delle situazioni asincrone che potresti incontrare durante lo sviluppo di React. Ricorda solo di essere consapevole delle dipendenze degli effetti. Se non hai trovato il tuo caso negli esempi qui sotto, lascia un commento e lo esaminerò.

Grazie per aver letto

— Fernando Abolafio