Exécutez des tâches asynchrones avec useEffect proprement et en toute sécurité

De l'appel d'une API pour définir un délai d'expiration, je suis sûr que vous vous êtes déjà demandé comment le faire correctement lors de l'utilisation du hook React useEffect. Si cela semble encore flou, alors cet article est pour vous. Sinon, vous pouvez au moins apprendre une approche différente pour faire le travail ou vous sentir plus confiant en le faisant.

Je vais vous présenter 3 façons de le faire en toute sécurité et en ordre. Mais d'abord, je veux montrer ce que vous ne devriez PAS faire.

Ce qu'il ne faut PAS faire ❌

N'effectuez pas la tâche asynchrone directement dans useEffect, mais encapsulez TOUJOURS votre tâche asynchrone dans une fonction et appelez-la uniquement à partir de useEffect.

Voici un exemple de ce que vous ne devriez PAS faire :

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

De plus, faire ce que cet exemple BAD a montré conduirait à une erreur React :

Les rappels d'effet sont synchrones pour éviter les conditions de concurrence.

Très bien, maintenant nous sommes en sécurité pour passer aux bonnes pratiques ⬇️

1. Définir la fonction async à l'intérieur du hook

Si vous avez l'intention d'exécuter une tâche asynchrone, pour obtenir des données d'une API par exemple, et mettre à jour l'état de chargement de votre composant, vous devez définir la fonction à l'intérieur du crochet, puis l'appeler :

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

2. Définir la fonction async en dehors du hook

Si vous envisagez de réutiliser la fonction asynchrone que vous avez définie, une bonne idée est de la définir dans le corps de votre composant fonctionnel, enveloppé par le useCallbackcrochet. Vérifiez-le:

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

3. Définition d'un intervalle ou d'un délai d'attente

Les 2 exemples précédents étaient principalement axés sur la récupération des données et la mise à jour de l'état du composant. Celui-ci doit également montrer un scénario courant pour les tâches asynchrones à l'intérieur de useEffect qui définit un intervalle ou un délai d'attente.

L'astuce consiste à TOUJOURS effacer le délai d'expiration et l'intervalle définis dans le fichier useEffect.

Définition d'un délai d'attente

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

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

Les exemples ci-dessus vous permettront de couvrir 99,99 % des situations asynchrones que vous pourriez rencontrer lors du développement de React. N'oubliez pas d'être conscient des dépendances d'effet. Si vous n'avez pas trouvé votre cas dans les exemples ci-dessous, laissez un commentaire et je l'examinerai.

Merci d'avoir lu

—-Fernando Abolafio