useEffect, usando el Hook de efecto en React

En artículos anteriores hemos hablado de los distintos framework que existen, sus diferencias y sus ventajas. Pero hoy vamos a hablar de un Hook de React que seguramente todos los desarrolladores conocemos, useEffect().

¿Qué es useEffect?

Cualquier desarrollador que haya trabajado con versiones recientes de React, se habrá encontrado con el hook useEffect().

Este Hook es una de las herramientas más útiles que nos ofrece React para crear una interfaz capaz de reaccionar a los cambios que se produzcan en nuestra aplicación.

Su uso es relativamente fácil de explicar: useEffect se ejecuta cuando el componente se monta, cada vez que cambia alguna parte del estado del componente y finalmente cuando el componente se desmonta.

Una de las claves del correcto uso de useEffect está en evitar que se ejecute con cada renderizado. Ya que, por defecto, todos los useEffect hooks de nuestro componente se ejecutarán cada vez que el componente se actualice. Veamos como evitarlo, pero primero, vamos a conocer un poco más de este Hook tan útil.

¿Qué hace useEffect?

Lo primero que hay que saber es cómo funciona. Es importante saber que al usar este Hook, le estamos indicando a React que el componente tiene que hacer algo después de renderizarse.

React recordará la función que le hemos pasado (nos referiremos a ella como nuestro “efecto”), y la llamará más tarde después de actualizar el DOM.

¿Por qué se llama a useEffect dentro del componente?

Al utilizar useEffect dentro del componente nos permite acceder a la variable de estado count (o a cualquier prop.) directamente desde el efecto.

Esto facilita el proceso ya que no necesitamos una API especial para acceder a ella, ya que se encuentra en el ámbito de la función. Los Hooks aprovechan los closures de JavaScript y evitan introducir APIs específicas de React donde JavaScript ya proporciona una solución.

¿Cómo evitar la ejecución en cada renderizado?

Como hemos comentado anteriormente, por defecto, UseEffect se ejecuta después del primer renderizado y después de cada actualización. Vamos a explicar cómo modificar este comportamiento.

UseEffect, cuenta con un segundo parámetro opcional en el que podemos definir cuáles son los cambios en el estado que queremos que ejecuten la función. Estos cambios los introducimos como un array con las variables con las cuales queremos ejecutar.

Para que este ejemplo sea simple y claro, solo cambiaremos el título del documento cuando cambien la variable del estado count, y no en cada renderizado.

Es posible añadir múltiples variables a este array, pero es muy recomendable tratar de mantener las dependencias de cada useEffect al mínimo posible, esto nos ayudará a evitar errores y ejecuciones no deseadas a la hora de desarrollar.

Uso de return para evitar fugas de memoria

Un caso de uso habitual de useEffect és el de hacer llamadas asíncronas o suscripciones a detectores de eventos. Estos casos de uso suelen ser propensos a producir errores si no se hace un uso correcto del hook.

Por su parte, React nos facilita dentro de useEffect una función de retorno con la que podemos limpiar las suscripciones o llamadas asíncronas cuando el componente se desmonta.

useEffect(() => {

function handleStatusChange(status) {

setIsOnline(status.isOnline);

}

ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

return () => {

ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);

};

}, [props.friend.id]); // Only re-subscribe if props.friend.id changes

Este es un ejemplo en el que podemos ver como se usa la función de retorno para dar de baja la suscripción del componente a una API y así evitar una fuga de memoria.

¿Es recomendable el uso de useEffect en React?

Como hemos explicado al comenzar el artículo, UseEffect es uno de los hooks de React más comúnmente utilizados y permite hacer muchísimas cosas al equipo de desarrollo.

Es por eso, que debemos ser muy estrictos cuando definimos sus casos de uso y funcionamiento, ya que un mal uso de este hook puede conllevar una infinidad bugs difíciles de identificar y resolver, comportamientos inesperados en nuestros componentes y sobre todo, un derroche de recursos y tiempo para nuestro equipo, evitable e innecesario.

Si quieres seguir ampliando tus conocimientos sobre este Hook, aquí te dejamos un enlace a la documentación oficial.

Arnau Tresserras Ridao – Product Owner at Itequia