Ejecute tareas asincrónicas con useEffect de forma limpia y segura

Desde llamar a una API para establecer un retraso de tiempo de espera, estoy seguro de que ya se preguntó cómo hacerlo correctamente cuando usa el gancho React useEffect. Si eso todavía suena borroso, entonces este artículo es para ti. De lo contrario, al menos puede aprender un enfoque diferente para hacer el trabajo o sentirse más seguro mientras lo hace.

Voy a presentar 3 formas de hacerlo de forma segura y ordenada. Pero primero, quiero mostrarte lo que NO debes hacer.

Lo que NO debes hacer ❌

No realice la tarea asíncrona directamente en useEffect, en su lugar, SIEMPRE envuelva su tarea asíncrona en una función y solo llámela desde useEffect.

Aquí tienes un ejemplo de lo que NO debes hacer:

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

Además, hacer lo que mostró este ejemplo MALO, conduciría a un error de reacción:

Las devoluciones de llamadas de efectos son síncronas para evitar condiciones de carrera.

Muy bien, ahora estamos seguros para pasar a las buenas prácticas ⬇️

1. Definición de la función asíncrona dentro del gancho

Si tiene la intención de ejecutar una tarea asincrónica, para obtener algunos datos de una API, por ejemplo, y actualizar el estado de carga de su componente, debe definir la función dentro del enlace y luego llamarla:

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

2. Definición de la función asíncrona fuera del gancho

Si planea reutilizar la función asíncrona que definió, una buena idea es definirla en el cuerpo de su componente funcional, envuelto por el useCallbackgancho. Échale un vistazo:

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

3. Establecer un intervalo o tiempo de espera

Los 2 ejemplos anteriores se centraron principalmente en obtener datos y actualizar el estado del componente. Este es para mostrar también un escenario común para tareas asíncronas dentro de useEffect que establece un intervalo o un tiempo de espera.

El truco es SIEMPRE borrar el tiempo de espera y el intervalo establecido en el archivo useEffect.

Establecer un tiempo de espera

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

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

Los ejemplos anteriores lo cubrirán en el 99.99% de las situaciones asincrónicas que puede encontrar mientras desarrolla React. Solo recuerda tener en cuenta las dependencias de los efectos. Si no encontró su caso en los ejemplos a continuación, deje un comentario y lo investigaré.

Gracias por leer

—- Fernando Abolaño