Introducción a Hooks de ReactJS

¿Qué son los hooks?

Los hooks o ganchos son funciones que ofrecen características similares a las que tienen los componentes de clase como, por ejemplo, el estado o el ciclo de vida. Pero, en este caso, se usan en los componentes de tipo función.

Si no tienes del todo claras las diferencias entre un componente de tipo clase y uno de tipo función, te dejo un ejemplo de cómo sería el mismo caso con ambos tipos:

Componente de tipo clase

Componente de tipo función

Como puedes ver, los componentes de tipo clase son bastante más engorrosos de escribir e, incluso, de leer. El problema de los componentes de tipo función es que no tenían estado ni ciclo de vida, y por ello surgieron los hooks.

Tipos de hooks

React trae por defecto unos pocos hooks que nos permiten tener características especiales que solo tienen las clases, pero sin necesidad de utilizar dichas clases.

Los hooks que tenemos por defecto son:

. useState → este hook nos permite tener un estado en nuestro componente.

. useEffect → este hook nos permite tener “efectos” secundarios en los componentes de tipo función. Para aclarar un poco este concepto, este hook es una combinación de los ciclos de vida componentDidMount, componentDidUpdate y componentWillUnmount

Además de estos dos hooks, tenemos otros que nos proporcionan funcionalidades varias. Si quieres echar un vistazo a toda la lista, te dejo el enlace a la documentación oficial: Referencia de la API de los Hooks.

Debajo puedes ver un ejemplo de un contador con estado, tanto de tipo clase como de tipo función para que se aprecie el uso del hook useState que, como he comentado antes, nos permite tener estado en un componente de tipo función:

Contador de tipo clase

Contador de tipo función con el hook useState:

En el ejemplo del contador anterior, en la 3ª línea, se puede leer lo siguiente:

Esto es lo que llamamos hook; es una forma de enganchar el estado a un componente. No es más que una función (en este caso la función useState) que devuelve dos cosas:

1. El valor del estado que queremos almacenar.
2. Una función para actualizar dicho valor.

Además, podemos inicializar el valor del estado si le pasamos un valor inicial a la función useState. En el ejemplo, lo inicializamos a 0.

Reglas de uso de los hooks

Como ya se ha mencionado anteriormente, los hooks tienen dos reglas básicas para su uso:

1. Sólo se pueden usar en el nivel superior del componente, es decir, no se usan dentro de condicionales, bucles o funciones internas.
2. Sólo se usan en componentes de tipo función, ya que los componentes de tipo clase ya tienen su propia forma de hacer estas cosas.

Hooks personalizados

Una cosa que me gusta mucho es que podemos hacer nuestros propios hooks.

Cuando tienes una operación que repites una y otra vez, como por ejemplo obtener datos de una llamada a una API, es interesante poder crear alguna utilidad que nos simplifique la vida con esta operación. Yo, por ejemplo, suelo hacer un hook parecido a este:

Con este pequeño hook , puedo hacer llamadas a cualquier URL y obtener la respuesta de forma fácil, tal y como muestro aquí:

Como ves, el uso de hooks tiene muchas posibilidades y puedes ahorrar bastante tiempo en tareas repetitivas.