React Hooks: ¿qué son y cómo usarlos?

React es muy popular entre los desarrolladores actuales y un tema que deben conocer muy bien son los hooks, relativamente nuevos y que se implementaron en 2013 para solucionar deficiencias que tenía esta biblioteca durante su lanzamiento.

En este artículo te explicaré la definición, importancia y manera de usar el hook useState y te enseñaré a crear tus propios hooks.

¿Qué son los Hooks?

Los hooks son funciones en React que nos permitirán engancharnos (colgarle o adherirle una funcionalidad al componente) al estado y al ciclo de vida de la aplicación (entre otras funcionalidades). Se crearon específicamente para componentes funcionales.

Además del significado de engancharnos, debemos tener en cuenta estos conceptos:

▶️ Los estados, en palabras muy sencillas, son variables que van a almacenar y cambiar información de un componente.

▶️ El ciclo de vida se refiere a funciones ejecutadas en distintos momentos y que realizan distintas acciones.

Los hooks aparecieron en la versión 16.6 de React y ya de manera estable en la versión 16.8.0, solucionando problemas como:

• Reutilización de código entre los componentes.
• Longitud de los componentes, convirtiéndose en algo muy complejo de entender.
• La optimización del uso del this.

Antes de esta versión, la solución más viable era que cada problema se resolviera de forma individual, pero al igual que una bola de nieve, el código de los desarrolladores se hacía más grande a cada momento.

Analizándolo llegaron a la conclusión de que no eran problemas separados sino uno solo. De acá nacen los hooks, elementos simples y funciones con estado y ciclo de vida que enganchan componentes funcionales, potenciando sus características de manejo que ofrece React como si fuese una clase. Por esta razón, ahora es más fácil reutilizar en la lógica del componente, es más declarativo y resumido de hacer.

¿Qué tipos de hooks existen?

En React tenemos dos tipos:

• Predefinidos: los reconocemos por tener todos el prefijo use, por ejemplo: useState.
• Custom Hooks: se crean a conveniencia. Por regla general, llevan igual el prefijo use.

En este momento, supongo que debes preguntarte: ¿por qué usar hooks en vez de clases? Una respuesta sencilla es que los hooks aplican la filosofía de composición y flujo de datos explícitos dentro de un componente y no solo el componente en sí, además no de tener anidamientos innecesarios en su árbol de componentes. Por ende, nos ofrecen un código homogéneo. Dada su sencillez para probarlos, es bastante fácil adaptarnos a ellos.

Límites del uso de hooks

Para usarlos de una manera correcta, debes tener en cuenta las siguientes reglas:

✅ Debes llamar los hooks solamente en nivel superior. Evita llamarlos dentro de condicionales, funciones anidadas o dentro de ciclos. Con esto te aseguras de que los hooks se llamen en cada render del componente, en el mismo orden.

✅ Evita llamar a los hooks desde funciones regulares JavaScript. En cambio, hazlo desde el componente funcional o desde un custom hook (hook personalizado).

Al seguir estas reglas, previenes bugs en tus aplicaciones de React, ya que toda la lógica del estado de un componente es homogénea.

Usar un hook

En React tenemos muchos hooks definidos, compatibles con todas las plataformas y listos para usar. En esta guía mostraré un hook useState. Si deseas más información sobre los demás, te invito a leer la documentación oficial de React.

📌 useState

Este hook lo encontraremos más seguido en (por no decir que en prácticamente en todas) las aplicaciones React. Permite el manejo de estados, es decir, cuando necesitamos que una variable cambie de dato en diferentes momentos, usamos este estado.

🚀 Usaré Visual Studio Code como editor de código y Vite para crear los ejemplos a manera de ilustración del tema.

Importar el hook

import { useState} from ‘react’

Sintaxis

const [elemento, setElemento] = useState(valorInicial)

Ejemplo de UseState

En este ejemplo, tenemos el componente App.jsx. Lo primero que debemos usar para implementar el hook lo observamos en la primera línea:

import { useState } from ‘react’

Para definir las variables se usará un arreglo con el primer valor del nombre que deseemos y en el segundo el prefijo set, seguido del nombre de la primera variable, usamos CamelCase. En este caso, la variable se llama valor y eso lo asignamos al estado (useState) inicializándolo en 0 (cero), ya que necesitamos que cuente los clics del botón.

const [valor, setValor] = useState(0)

Tenemos el cambio del valor en implementando en el onClick. Lo hacemos usando el segundo dato del arreglo que definimos (SetValor), con lo que lo podemos actualizar el estado. Es decir: Actualizamos el dato en cada clic con el dato que tenía inicialmente aumentando en uno:

setValor(valor => valor + 1)

Para acceder al valor, lo hacemos entre llaves de la siguiente manera:

<button> El valor actual es de: { valor } </button>

Los estados pueden inicializarse con cualquier tipo de dato (entero, booleano, string, etc.) y manejarlos de la misma manera. Te invito a leer más en la documentación oficial. A continuación, te muestro la manera de declararlos:

Ahora un ejemplo para recoger datos con useState:

En el ejemplo tenemos un formulario con tres inputs para nombre, apellido y perfil de Linkedln. Por lo tanto, esos son los atributos de nuestro objeto:

const [datos, setDatos] = useState({

nombre: 'Anna',

apellido: 'Juárez',

linkedln:'https://www.linkedin.com/in/ana-juarez01/'

})

Para obtener los elementos que ingresamos en el input se agrega el método onCharge y se captura el dato ingresándolo en el estado, siempre usando el segundo valor que inicia con el prefijo set, en este caso setDatos:

onChange = {e => { setDatos({...datos, nombre: e.target.value}) }}

Para acceder al dato:

<p> Nombre: { datos.nombre } </p>

Custom Hooks

Los custom hooks son creados por nosotros para refactorizar nuestro código, es decir, nos permite manejar varios estados que se repiten en distintos componentes. Con esto nos ayuda a separar o encapsular partes del código para dejarlo más declarativo y visualmente más limpio.

📌 Crear un custom hook

Anteriormente vimos cómo podemos usar el useState, así que en este ejemplo crearemos un ToDo básico que añade y elimina una tarea de la lista usando ese hook:

👉 Usaré Visual Studio Code como editor de código. El SVG lo obtuve de la página HeroIcons.

Usamos useState para actualizar la data de la tarea y observamos que usamos en repetidas ocasiones el setTodo. Eso lo hace perfecto para extraerlo a un custom hook y se hace de la siguiente manera:

Paso 1: Identificamos el código que se repite (en este caso la actualización del estado).

Paso 2: Creamos una carpeta llamada hooks a nivel de la carpeta src de nuestro proyecto en React y creamos un archivo con el nombre que le daremos al hook.

Paso 3: En el nuevo archivo extraemos el useState:

const [todo, setTodo] = useState(data)

La data que contiene el estado es la información inicial que tenemos en el componente ToDo. Eso lo veremos luego, primero definamos el hook.

Paso 4: Como observábamos, necesitamos añadir y eliminar la nueva tarea, pero sin repetir código, así que lo hacemos creando una función que realice la acción:

const añadirTarea = (tarea) => {

tarea.id = Date.now()

setTodo([...todo, tarea])

}

Recibirá por parámetro la tarea que se agregará. Usamos Date.now() para asegurarnos de que el identificador no sea siempre el mismo. El setTodo recibe el array que inicializamos, así como la nueva tarea que agregamos con el identificador nuevo.

const eliminarTarea = (tareaID) => {

const tareasFiltradas = todo.filter(item => item.id != tareaID)

setTodo(tareasFiltradas)

}

Para eliminar, recibimos el identificador de la tarea que debemos remover y, con ayuda del método filter, la constante tareasFiltradas recibe un array con la tarea eliminada. Con eso actualizamos el estado.

Paso 5: Ahora que ya tenemos el estado y las funciones que realizan el proceso, debemos retornarlos porque los usaremos en el componente ToDo:

return [ todo, añadirTarea, eliminarTarea]

Paso 6: Necesitamos inicializarlo con la información que tenemos en el componente ToDo. Eso lo resolvemos enviándole un parámetro de la siguiente manera:

En el componente ToDo importamos el hook y lo usamos como si fuera uno predefinido, así:

import useTodo from './hooks/useTodo'

De esta forma, traemos las funciones que exportamos del hook:

const [todo, añadirTarea, eliminarTarea] = useTodo(iniciales)

Con todo esto realizado, el código se vería así:

El componente ToDo:

El custom hook:

Así se vería en funcionamiento:

Podemos observar que ya delegamos todo en el useTodo y que no necesitamos editar lógica porque lo hace solo. En nuestro componente ToDo sabemos que añade y elimina declarativamente porque internamente no miramos la lógica. Ese es el objetivo de los custom hooks.

Conclusión

Los hooks son esenciales en nuestro código. Debemos saber usarlos y para ello debemos practicar porque aunque algunos parezcan fáciles, sí tienen su grado de complejidad. Te recomiendo entrar a la documentación oficial de React, así como ver las preguntas frecuentes y buscar algún repositorio donde haya ejemplos (como el de rehooks) para que puedas replicarlos 🚀.

Espero haber ayudado a incorporarte al mundo de los hooks con React. Nunca dejes de practicar todos los conocimientos para ser cada vez mejor 💻.

¡Hasta la próxima 🚀!