React useEffect

useEffect es probablemente el hook ms confuso e incomprendido en React. Hoy quiero aclararte eso.

Usamos hooks todo el tiempo en Make It Real y comprender useEffect es crucial si vamos a escribir cdigo React de estilo moderno.

A continuacin veremos:

• Qu esuseEffect?
• Cmo ejecutar un effect(efecto) en cadarender
• Cmo ejecutar un efecto solo en el primerrender
• Cmo ejecutar un efecto en el primer render y volver a ejecutarlo cuando cambia una "dependencia
• Cmo ejecutar un efecto con limpieza

Qu es useEffect?

El hookuseEffectnos permite realizar side effects(efectos secundarios) en nuestros componentes de funcin. Los side effects son esencialmente cualquier cosa en la que queremos que suceda una accin "imperativa". Esto es cosas como:

• Llamadas a API
• Actualizar el DOM
• suscribirse a event listeners(oyentes de eventos)

Todos estos son efectos secundarios que podramos necesitar que un componente haga en diferentes momentos.

Ejecutar useEffect en cada render

El hook useEffect no devuelve ningn valor, sino que toma dos argumentos. Siendo el primero obligatorio y el segundo opcional. El primer argumento es la funcin callback del efecto que queremos que ejecute Hook (es decir, el efecto en s). Supongamos que queramos colocar un mensaje console.log() dentro del callback del useEffect.

import { useEffect } from "react";export const FunctionComponent = () => {  useEffect(() => {    console.log("run for every componentrender");  });  return (    // ...  );}

De forma predeterminada, el efecto establecido en el hook useEffect se ejecuta cuando el componente se renderiza por primera vez y despus de cada actualizacin. Si ejecutamos el cdigo anterior, notaremos que se genera el mensaje console.log('run for every componentrender') a medida que se renderiza nuestro componente. Si nuestro componente alguna vez se volviera a renderizar (por ejemplo, de un cambio de estado con algo como useState), el efecto se ejecutara nuevamente.

A veces, volver a ejecutar un efecto en cada renderizado es exactamente lo que quieres. Pero la mayora de las veces, solo desea ejecutar el efecto en ciertas situaciones, como en el primer renderizado.

Cmo ejecutar el useEffect solo en el primer render

El segundo argumento del hook useEffect es opcional y es una lista de dependencias que nos permite decirle a React que omita la aplicacin del efecto solo hasta que se den ciertas condiciones. En otras palabras, el segundo argumento del hook useEffect nos permite limitar cundo se ejecutar el efecto. Si simplemente colocamos un array vaco como segundo argumento, as es como le decimos a React que solo ejecute el efecto en el renderizado inicial.

import { useEffect } from "react";export const FunctionComponent = () => {  useEffect(() => {    console.log("run only for first component render (i.e.component mount)");  }, []);  return (    // ...  );}

Con el cdigo anterior, el mensaje console.log() solo se activar cuando el componente se monte por primera vez y no se volver a generar, incluso si el componente se vuelve a renderizar varias veces.

Esto es mucho ms "eficiente" que ejecutar en cada renderizado, pero no hay un trmino medio feliz? Qu pasa si queremos rehacer el efecto, si algo cambia?

Ejecutar el useEffect en el primer render y volver a ejecutarlo cuando cambie la dependencia

En lugar de hacer que un efecto se ejecute una vez al principio y en cada actualizacin, podemos intentar restringir el efecto para que se ejecute solo al principio y cuando cambie cierta dependencia.

Supongamos que queramos lanzar un mensaje console.log() cada vez que cambiara el valor de una propiedad de estado. Podemos lograr esto colocando la propiedad de estado como una dependencia del callback del efecto. Mira el siguiente ejemplo de cdigo:

import { useState, useEffect } from "react";export const FunctionComponent = () => {  const [count, setCount] = useState(0);  useEffect(() => {    console.log(      "run for first component render and re-run when 'count' changes"    );  }, [count]);  return (    <button onClick={()=> setCount(count + 1)}>      Click to increment count and trigger effect    </button>  );}

Arriba, tenemos un botn en el template del componente responsable de cambiar el valor de la propiedad de estado de count cuando se hace click. Cada vez que se cambie la propiedad de estado count (es decir, cada vez que se haga click en el botn), notaremos que se ejecuta el callback del efecto y se activa el mensaje console.log().

Ejecutar efecto con limpieza

Se ejecuta un callbak de efecto cada vez en el procesamiento inicial y cuando especificamos cundo se debe ejecutar un efecto. El hook useEffect tambin brinda la capacidad de ejecutar una limpieza despus del efecto. Esto se puede hacer especificando una funcin de retorne al final de nuestro efecto.

import { useState, useEffect } from "react";export const FunctionComponent = () => {  const [count, setCount] = useState(0);  useEffect(() => {    console.log(      "run for first component render and re-run when 'count' changes"    );    return () => {      console.log("run before the next effectand when component unmounts");    };  }, [count]);  return (    <button onClick={()=> setCount(count + 1)}>      Click to increment count and trigger effect    </button>  );}

En el ejemplo anterior, notaremos que el mensaje de la funcin de limpieza se activa antes de que se ejecute el efecto deseado. Adems, si nuestro componente alguna vez se desmonta, la funcin de limpieza tambin se ejecutar.

Un buen ejemplo de cundo podramos necesitar una limpieza es cuando configuramos una suscripcin a nuestro efecto, pero queremos eliminar la suscripcin cada vez que se realice la prxima llamada de suscripcin, para evitar memory leaks.

A good example of when we might need a cleanup is when we set up a subscription in our effect but want to remove the subscription whenever the next subscription call is to be made, to avoid memory leaks.

Estas son principalmente todas las diferentes formas en que el hook useEffect se puede utilizar para ejecutar efectos secundarios en componentes. Te invito a ver esta guia visual de useEffect de ALEX SIDORENKO que ilustra estos conceptos a travs de una serie de GIF es a la vez inteligente y eficaz, especialmente para los estudiantes visuales. Tambin hay una visualizacin de cmo funcionan las funciones de primera clase si quieres ms.

@khriztianmoreno

Hasta la prxima.