En el artículo anterior vimos un ejemplo del hook useState, el cual nos provee una forma de acceder al estado en componentes stateless. Pues bien, el otro hook que nos provee React es effect.

useEffect

El hook useEffect nos permite "subscribirnos" al ciclo de vida del componente. Puedes pensar en que este hook es la combinación de componentDidMount, componentDidUpdate y componentWillUnmount.

Veamos un ejemplo para comprenderlo mejor.

En este ejemplo hemos usado tanto los hooks useState para actualizar el valor que se ingresa en el input y también useEffect para realizar ciertas acciones cada vez que el componente sea re-renderizado.

Cada vez que se actualiza el estado con el nuevo valor ingresado en la caja de texto, el componente se re-renderiza y se ejecuta el callback pasado a useEffect. Puedes pensar en useEffect como un listener para los renders de tu componente; es por esto que se dice que es una combinación de los métodos del ciclo de vida de un componente stateful.

Por último, cada vez que se ejecuta el hook, vemos si contiene un email válido para, por medio de un ref y mostrar u ocultar el mensaje de error respectivamente. Fíjate que no volvemos a actualizar el estado dentro de setEffect porque en este caso entraríamos en un loop infinito.

Y eso es todo 😉, en el próximo post haremos una pequeña aplicación para poner en práctica todo lo aprendido sobre los hooks.