useEffect: descubre los tres tipos de desencadenadores y cómo usarlos

Hoy seguiremos hablando de otro hook useEffect que, junto con useState, es uno de los mas importantes y utilizados en React. Que nos permite manejar los efectos secundarios en nuestros componentes.

Cuado hablamos de efectos secundarios nos referimos a cosas como, hacer una solicitud a una API, operaciones de lectura y escritura en el dom, entre otros tipos de interacciones. Con useEffect podremos ejecutar código en el momento que nuestro componente se monte, actualice o desmonte.

Primero miremos la firma de este hook:

useEffect(function, dependencies?);

La función: es la lógica que vamos a desencadenar, opcionalmente puede devolver una función de limpieza, pero eso lo veremos más adelante.

Cuales serán las acciones que desencadenen en nuestro useEffect lo configuraremos con el segundo parámetro que le pasemos, las dependencias. Existen tres formas diferentes de desencadenar la función useEffect. Estos son los siguientes:

1. Sin dependencias

Si declaramos un useEffect sin pasarle dependencias, nuestra lógica se ejecutará cada vez que el componente se actualiza o se monta.

useEffect(() => {
  // Código a ejecutar al montarse y en cada render
});

Muy pocas veces he visto que se utilice de esta forma, puede ser útil, por ejemplo, cuando necesitemos enviar un registro de seguimiento a nuestro servidor cada vez que el componente se actualiza.

2. Con dependencias vacías

Mas común es pasarle como dependencia un array vacío, en este caso la función solo se ejecutará una vez, cuando el componente se monta.

useEffect(() => {
  // Código que se ejecuta al montarse el componente
}, []);

Este desencadenador lo vamos a utilizar cuando se necesita ejecutar un efecto secundario solo una vez al inicio del ciclo de vida del componente. Por ejemplo, cuando necesitemos cargar datos desde un servidor al iniciar el componente.

3. Con dependencias

Y como tercer desencadenador, cuando se especifica un array de dependencias. Tendremos una ejecución del código cada vez que el valor de la dependencia cambie.

const [state, setState] = useState(initialState);

useEffect(() => {
  // Código a ejecutar cuando state cambie
}, [state]);

Vamos a utilizar las dependencias cuando necesitemos ejecutar un efecto secundario solo cuando alguna dependencia cambia. Por ejemplo, podemos actualizar el título de la página cuando cambia una categoría seleccionada, hacer una solicitud de API cada vez que cambia el identificador del producto, y más. Este desencadenador permite que los efectos secundarios se ejecuten de manera precisa y eficiente, lo que ayuda a optimizar el rendimiento de la aplicación.

En conclusión, podremos considerar a useEffect como una herramienta poderosa y flexible con la que trabajaremos nuestros efectos secundarios. Con los tres desencadenadores diferentes, podemos utilizarlo de manera efectiva para ejecutar el código en el momento adecuado y en la situación adecuada.

Dejo el enlace a la documentación oficial de React.dev: useEffect, para que puedan seguir aprendiendo sobre este tema y ver otros ejemplo.