React es una librería JavaScript que nos permite simplificar y unificar el código de JavaScript con el código de HTML para crear interfaces de usuario. Estas interfaces se crean específicamente en el contexto del desarrollo de aplicaciones de una sola página o SPA (single page application). Para permitirnos crear este código, la sintaxis de React usa elementos, componentes, estados y efectos. En este post, te enseñaremos cómo funciona useEffect en React, el comando responsable de crear efectos en esta poderosa librería.
¿Qué es 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.
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.
Entonces, ¿qué es el useEffect en React? useEffect en React es un tipo de los hooks en react que se incorporó en la versión de React 16.8. Como su nombre indica, este hook nos permite definir efectos. ¿Sabes que son los hooks en react ?
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. Antes ya hemos visto que 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 hooks 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.
¿Cuál es el siguiente paso?
Después de leer este post, sabes exactamente qué es el comando useEffect en React y useeffect como funciona, 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. ¿A qué esperas para dar el siguiente paso y priorizar tu aprendizaje? ¡Inscríbete ya!
