Comprender y manejar los efectos secundarios es crucial para construir aplicaciones robustas y eficientes. El useEffect en React es uno de los hooks más poderosos y versátiles que esta librería te ofrece. En este artículo, exploraremos en profundidad este hook, partiendo desde qué es hasta cómo se usa. Así que sumérgete con nosotros en el mundo de React y descubre cómo useEffect puede mejorar y simplificar la gestión de efectos secundarios en tus aplicaciones.
¿Qué es useEffect en React?
El useEffect en React es un tipo de hook que se incorporó en la versión de React 16.8. Como su nombre lo indica, este hook nos permite definir efectos. Los efectos en esta librería de JavaScript nos permiten ejecutar un trozo de código según el momento en el que se encuentre el ciclo de vida de nuestro componente. Además, podemos usarlo para ejecutar una acción específicamente después del primer render. Sin embargo, los efectos no se quedan ahí.
Con el hook useEffect en React, también podemos ejecutar trozos en las otras fases del ciclo de vida, ya sea en updating o en unmounting. En este orden de ideas, el hook useEffect en React equivale a una combinación de las funciones componentDidMount, componentDidUpdate y componentWillUnmount. Por eso es tan importante aprender que son los hooks en react.
Ejemplo práctico del useEffect en React
En nuestro post sobre los efectos en React, encontrarás un ejemplo de cómo se utiliza el useEffect en React para crear un trozo de código que se ejecuta después del primer render. Allí, también encontrarás la explicación sobre qué son y cómo se utilizan los efectos, uno de los elementos más importantes de la sintaxis de React.
¿Cuáles son las fases del useEffect en React?
En nuestro post sobre el estado y ciclo de vida de componentes en React, hablamos de las distintas fases o etapas de un componente tipo clase. En este tipo de componentes, existe una fase de montado mounting, en la que se inicializa el componente en el DOM y ocurre un primer render. Luego, están la fases de actualización updating, donde el estado interno se actualiza, y de desmontado unmounting, donde el componente desaparece del DOM.
En la fase de montado para los componentes en React de tipo clase, existe una función llamada componentDidMount. Cuando React se basaba más en una programación orientada a objetos, esta función nos permitía definir secciones de código a ejecutar justo después del primer render. En los componentes de tipo función actuales, esto lo podemos hacer con el useeffect en react.
¿Cómo se usa el useEffect en React?
Una forma de utilizar el useEffect en React es para insertar funciones que queremos que se salgan del flujo de renderizado de React. Entonces, supongamos que tenemos un proyecto en el que queremos crear un reloj. Para ello, hemos creado una función tick que guarda la hora actual en un estado. Esta función se actualiza cada segundo gracias a un método setInterval.
Sin embargo, como nuestra función tiene un estado que se modifica, estamos provocando un nuevo render cada segundo. Esto genera que nuestro método setInterval y su ID se monten y desmonten del DOM cada vez, creando un nuevo método. Para evitar esto, podemos sacar este trozo de código del flujo de renderizado de React de la siguiente manera:
React.useEffect (() => {
const tick = () => {
setNow (new Date ().toLocaleTimeString());
};
const id = setInterval (tick, 1000);
return () => {
clearInterval (id);
};
}, [ ]);
El código anterior se ejecuta después del primer render y equivale de alguna manera a la función componentDidMount, pues funciona como un efecto. El segundo parámetro que le hemos pasado ([ ]) es un array vacío y nos permite definir que el código se ejecute solo después del primer render.
Ahora, el hook useeffct en React también puede devolvernos un elemento. En este caso, la palabra clave return define que obtendremos de vuelta la función clearInterval, que en nuestro caso usaremos para limpiar el intervalo. ¿Cuándo se ejecuta esta función si está dentro de un efecto? Pues justo antes de que el componente se desmonte del DOM. Es decir, equivaldría a la función componentWillUnmount.
Ahora ya sabes qué es el comando useEffect en React y cómo se usa, por lo que estás un paso más cerca de dominar esta librería JavaScript. Ahora, el siguiente paso para poder desarrollar proyectos con ella es dedicarte por completo a tu aprendizaje. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación íntegra e intensiva donde aprenderás a dominar herramientas de programación para la web, como React, JavaScript, CSS y HTML.
