React: Tres hooks indispensables para componentización

Si hay algo que somos lo suficientemente mayores para saber, es que el universo de la programación está en constante cambio. Con el tiempo, muchos lenguajes se vuelven aún más efectivos a través del proceso de adaptación y React no es una excepción. Pensando en este concepto, creé un artículo que aborda los hooks, herramientas esenciales para la componentización con funciones que llegaron a revolucionar el lenguaje antes mencionado.

Aquí aprenderás sobre useState, useEffect y useHistory, con ejemplos de cómo se pueden implementar y para qué sirven. Sin embargo, tomémoslo con calma: primero, asegúrate de saber qué es realmente un hook y su importancia en la vida diaria de React.

Hooks

Los hooks son la solución al problema de ciertas características (como la gestión del estado y del ciclo de vida) que solo eran posibles en componentes que usaban clases.

Agregados desde React 16.8, los enlaces también proporcionaron una implementación más práctica, más intuitiva y que requería menos tiempo. Poco a poco, ganaron notoriedad y popularidad entre la comunidad, convirtiéndose en herramientas esenciales para el desarrollador front-end.

Para una buena práctica y uso de estos métodos, existen algunas restricciones que no se pueden violar. Además de estar solo disponible para componentes creados con funciones (no se pueden usar hooks en clases), todo lo que necesitas saber para empezar a usarlos es que:

• Los hooks solo deben usarse en el nivel superior de nuestra aplicación: no están destinados a implementarse dentro de bucles de condición o de bucle, y mucho menos dentro de funciones que tienen otras funciones dentro de ellos, por lo que deben estar en un lugar donde siempre se pueda acceder a ellos en cada representación;
• Los hooks solo deben usarse dentro de las funciones de React: para garantizar la visibilidad de los hooks, solo se pueden usar dentro de los componentes de React.

Habiendo dicho esta información y explicado los conceptos principales de lo que es un hook, podemos continuar. ¿Vamos allá?

Hook useState

La gestión de estados en aplicaciones de reacción es una tarea de la que es poco probable que huyamos en nuestro día a día como programadores, ya que representan una de las características más cruciales y viscerales del desarrollo front-end. Para ello, la componentización por clases nos otorga state y setState, que sirven para crear y actualizar los estados de una aplicación, respectivamente. En la Figura 1 podemos ver un ejemplo de uso de estado con clases:

Al usar useState, logramos que esta implementación fuera posible para las funciones e incluso más práctica en comparación con la forma en que administramos los estados en las clases.

No es necesario crear un objeto para el estado, ni desestructurar el estado que necesitamos usar en todas las funciones: solo importa el estado de uso de "react" y desestructura una matriz con dos elementos (uno para leer y otro para actualizar) procedente del método antes mencionado. Cuando queremos usar lo que está almacenado en el estado, recuperamos el primer elemento.

De manera similar, cuando es necesario cambiar el estado, pasamos lo que debe cambiarse como parámetro para el segundo elemento. Veamos:

Ten en cuenta que existe una convención y recomendación para nombrar estas constantes useState no estructuradas: tienen el mismo nombre, excepto por el "conjunto" al comienzo del segundo parámetro utilizado para actualizar el estado. Este es un patrón a seguir cuando se construyen estados con hooks.

Si la necesidad requiere una característica acumulativa de nuestro estado, tampoco hay mucha complicación. Primero, veamos cómo lo hacemos con las clases:

Como useState tiene solo un estado, no necesitamos especificar para todos ellos qué clave del objeto prevState queremos usar (a menos que nuestro estado sea específicamente un objeto). Por lo demás, el proceso es similar al que se muestra en la figura 2. Muy fácil, ¿no crees?

Hook useEffect

Este hook sirve para llevar a la componentización de funciones el concepto y aplicación del ciclo de vida de los componentes, de manera que según configuremos el useEffect, tendremos funciones que se comporten como componentDidMount, componentDidUpdate o componentWillUnmount (existentes en la componentización de clases).

useEffect no necesita ser asignado a una constante como se hizo con useState. Toma dos argumentos como parámetros, siendo el primero una función y el segundo un parámetro opcional. Es este parámetro el que definirá el comportamiento de useEffect.

Si en este segundo parámetro le pasamos una matriz vacía, useEffect se comportará como un componentDidMount, es decir, se ejecutará una sola vez cuando el componente esté montado:

Si no se pasa ningún parámetro en el segundo argumento, UseEffect se comporta como un componenteDidUpdate, es decir, se ejecuta cada vez que el componente cambia/representa.

Además, es posible informar cuáles elementos, cuándo se modifican y si es necesario ejecutar el useEffect. Para ello, pasamos un array con estos elementos dentro del segundo parámetro:

Finalmente, cuando pasamos una función dentro de la función existente en el primer parámetro y una matriz vacía en el segundo parámetro, useEffect se ejecutará cuando se desmonte el componente, comportándose así como un componenteWillUnmount.

Hook useHistory

El historial es una propiedad extremadamente importante que está disponible mediante React Router y, a través de él, tenemos acceso a una variedad de funciones (como redirigir al usuario a otras páginas).

Sin embargo, si el componente que necesita usar el historial no es una de las páginas configuradas (es decir, si es un componente dentro de un componente de ruta), necesariamente debemos pasar el historial como propiedad de un componente al otro. Esto puede ser un problema cuando tenemos muchos componentes dentro de componentes y no es una buena práctica usar funciones como una forma de creación de componentes.

Para resolver este problema, se creó useHistory. Este método se puede usar extrayéndolo de react-router-dom y asignando su retorno a una constante. Luego, solo usa la constante para lo que sea necesario:

Conclusión

¿Viste lo fácil y práctico que es usar hooks en tu proyecto? Recuerda que estos tres presentados son solo el comienzo de un vasto universo por explorar que te está esperando. Si quieres ir más allá, el sitio web de React trae un poco más sobre hooks. ¡Buen provecho!