React es una librería de JavaScript que nos permite simplificar muchas de las acciones de los lenguajes HTML y JavaScript en un nuevo lenguaje llamado JSX. Dentro de la sintaxis de este lenguaje, existen elementos importantes, como componentes, estados y efectos. En este post, te enseñaremos qué son y cómo funcionan los efectos en React, un elemento que nos permitirá manipular el ciclo de vida de un componente.
¿Qué son los efectos en React?
Los efectos en React son código que se ejecuta después del render. Es decir, se aplican después de que el componente se monte y se ejecute el primer render. El código de los efectos en React también puede ser ejecutado a continuación de la actualización de un componente, ya sea porque se ha cambiado el estado o las props.
Anteriormente, esto se definía con el uso del ciclo de vida en las clases, que tenían ciertas funciones para definir en qué punto de la vida de un componente se ejecutaba un código. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre el estado y ciclo de vida de componentes en React.
¿Cómo se utilizan los efectos en React?
En nuestro post sobre cómo crear un reloj en React, has visto cómo podemos crear este objeto con el uso de código HTML y JavaScript. Allí, utilizamos una función para definir la hora actual y hacemos que se repita usando el método setInterval. Luego, reemplazamos la función por un componente y la variable de hora por un estado.
Para simplificar nuestro reloj, hemos creado un botón que, al presionarlo, nos dice la hora actual. Estos cambios los puedes leer en nuestro post sobre cómo crear un reloj con botón en React.
A continuación, te presentamos cómo es el código actual:
<html>
<script type = «text/label»>
const rootElement = document.getElementById (‘root’);
const Clock = () => {
const [now, setNow] = React.useState (new Date ().toLocaleTimeString);
const tick = () => {
setNow (new Date ().toLocaleTimeString ());
);
setInterval (tick, 1000);
return (
<div classNmae = «container»>
<span classNmae = «clock> {now} </span>
</div>
);
};
const element = <Clock/>;
ReactDOM.render (element, rootElement);
</script>
</html>
En las líneas de código anteriores, hemos resuelto el problema de actualizar el estado sin un botón de un modo muy similar al primer reloj que hemos creado. Entonces, hemos definido una función tick con el uso de arrow functions. Esta función guarda el método setNow, por el que le pasamos la hora actual. Luego, hemos definido un método setInterval, con el que repetimos esta función cada 1000 milisegundos. Es decir, cada segundo pintaremos en pantalla un nuevo reloj.
Con este método, estamos poniendo un nuevo estado cada segundo. Como puedes leer en nuestro post sobre el estado en React, cada vez que un estado se modifica, forzamos un nuevo render del componente. Esto hace que la función tick se cree de nuevo.
Aunque esto no es un problema mayor, renderizar el componente una y otra vez también provoca que el setInterval se cree de nuevo cada segundo. Visualizar este problema es mucho más fácil cuando pensamos en el ID del método setInterval (tick, 1000). Si quisieras pintar en pantalla este ID, verías que con cada render obtenemos un nuevo ID, lo que quiere decir que es un método completamente nuevo.
Para solucionar el problema de que nuestro setInterval se cree una y otra vez, podemos utilizar los efectos en React. Estos nos permiten definir un pedazo de código a ejecutar una sola vez, pues se ejecutan justo después del primer render. Para aplicar los efectos en React, utilizamos el comando React.useEffect, un tipo de hook que nos permite pasar una función. Dentro de esta función, tenemos la opción de hacer que el código se ejecute una sola vez. Para ello, debemos pasar como segundo parámetro un array vacío, que se representa gracias al uso del símbolo [ ].
Para conocer más sobre el comando React.useEffect, te recomendamos leer el post de reactjs.org titulado Usando el Hook de efecto.
¿Cuál es el siguiente paso?
Después de leer este post, no solo has aprendido cómo funcionan exactamente los efectos en React, sino que también has dado un paso hacia dominar el mundo del desarrollo web. Ahora, el siguiente paso es dedicarte por completo a tu aprendizaje. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a dominar lenguajes y herramientas de programación para la web, como JavaScript, CSS, HTML y React. ¿A qué esperas para priorizar tu aprendizaje y dar este paso? ¡Inscríbete ahora!
