Uso de la sintaxis asíncrona en el callback useEffect

1. Qué es useEffect() en React
2. Cómo usar la sintaxis async dentro de useEffect en React
3. La mejor solución para usar la sintaxis async dentro de useEffect en React

El lanzamiento de React versión 16.8 cambió la biblioteca de muchas maneras. Con la introducción de los ganchos, los componentes funcionales adquirieron la capacidad de mantener el estado y manejar los efectos secundarios.

useEffect() es uno de los ganchos clave para componentes funcionales en React, y fue creado específicamente para manejar efectos secundarios. Es bastante fácil de entender, pero aún tiene algunas advertencias que los desarrolladores de React deben conocer.

Este artículo explorará una de esas advertencias: cómo utilizar la sintaxis async dentro de useEffect().

Qué es useEffect() en React

useEffect() es una solución que le permite manejar efectos secundarios en componentes funcionales. Si ha utilizado componentes de clase anteriormente, puede considerarlo como una alternativa a los métodos del bucle de vida.

Los efectos secundarios en las aplicaciones de React deben limitarse a useEffect(). Los ejemplos comunes incluyen el cálculo del tiempo o la carga asincrónica de datos externos a través de solicitudes, lo que nos lleva a nuestro tema principal.

Cómo usar la sintaxis async dentro de useEffect en React

Si intenta utilizar una función async como devolución de llamada useEffect, obtendrá un error que le indicará que el gancho no lo admite.

Entonces, ¿qué puede hacer exactamente si necesita usar esta sintaxis para cargar datos o para cualquier otro propósito? ¿Y por qué los creadores de React decidieron hacer que useEffect() sea incompatible con la sintaxis async?

Comencemos con la segunda pregunta. useEffect() no admite devoluciones de llamada async porque tales funciones normalmente requieren limpieza.

Los efectos secundarios deben manejarse con delicadeza, y el mal manejo de una función async dentro del gancho podría provocar pérdidas de memoria u otros errores que podrían exponer su aplicación. Es por eso que el equipo detrás de React decidió no permitirlo.

En cuanto a la primera pregunta, afortunadamente, hay una biblioteca que le permite poner funciones async en useEffect() sin obtener un error.

La mejor solución para usar la sintaxis async dentro de useEffect en React

Si debe utilizar la sintaxis async await, la mejor solución es utilizar un paquete use-async-effect. Este paquete proporciona un hook useAsyncEffect() ligeramente modificado, que tiene la misma funcionalidad que useEffect() pero le permite usar la sintaxis async.

Es muy facil de aprender. Incluso acepta los mismos argumentos que el useEffect() normal.

Para obtener más información sobre la instalación y otros detalles, lea los documentos oficiales.