¿Qué son los hooks?

Antiguamente, para trabajar con React era necesario utilizar clases de Javascript, una estructura de datos nativa que permite guardar y reutilizar información en dicha estructura, entre otras cosas. Sin embargo, desde el ecosistema de React se buscaba una forma de crear componentes sin clases, simplificándolas.

A partir de React 16.8 se introducen los hooks, una forma de ayudar a crear componentes sin necesidad de usar clases, utilizando simplemente funciones pero manteniendo características como el guardado del estado (información local), ejecución de código Javascript en momentos concretos (ciclo de vida), etc.

¿Qué son los Hooks?

Los hooks son funciones especiales (que empiezan siempre por use) que permiten realizar tareas concretas dentro del ecosistema de React. Existen muchos hooks, muchos de ellos integrados en React, pero también es posible crear nuestros propios hooks personalizados.

Los objetivos que persiguen los hooks son los siguientes:

• 1️⃣ Simplificar la complejidad y conseguir componentes más sencillos
• 2️⃣ Reutilizar lógica Javascript y su estado (información que cambia)
• 3️⃣ Organizar mejor nuestro código y escribir menos líneas

Reglas fundamentales

Los hooks de React tienen algunas reglas principales que hay que cumplir:

• 1️⃣ Los hooks se llaman en el nivel superior. Nunca en condicionales, bucles o funciones anidadas.
• 2️⃣ Sólo se pueden llamar en componentes funcionales o hooks. Nunca en funciones normales de Javascript.

El hook useState

Probablemente, el hook más sencillo de mostrar como ejemplo sea useState. Aunque lo explicaremos más adelante, vamos a ver una pequeña demostración de código donde se vea como funciona este hook.

El hook useState permite añadir y gestionar un estado en componentes funcionales, algo que sólo era posible antiguamente con las clases de Javascript. Si el concepto estado es nuevo para ti, cuando hablamos de estado nos referimos a la información que cambia en un componente.

El ejemplo más clásico de estado es la creación de un contador, que contiene un estado (que cambia) que es el número del contador. Veamos un ejemplo de código:

function Counter() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>El contador está en: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Aumentar</button>
    </div>
  );
}

El código es bastante sencillo. Observa que en el interior del componente tenemos una primera línea donde usamos el hook useState. Luego, más adelante, devolvemos un bloque JSX donde utilizamos tanto counter como setCounter. Vamos a explicar antes la primera parte.

Recordemos que los hooks son simplemente funciones. En la primera línea estamos ejecutando el hook useState() y nos devuelve un array con dos elementos, que estamos desestructurando para tenerlo en dos variables separadas.

• 1️⃣ El primer elemento lo hemos llamado counter y es la información actual del contador, el estado.
• 2️⃣ El segundo elemento lo hemos llamado setCounter y es una función para actualizar ese estado.

Por norma general, los hooks useState utilizan esta forma de nombrar, donde el segundo elemento suele comenzar por set, seguido del nombre del primer elemento, utilizando camelCase.

Además, observa que el hook useState() se usa pasando el valor 0 por parámetro. Este valor es el estado inicial de nuestro counter. Ahora que tenemos claro esto, podemos entender mejor el uso de counter y setCounter en la parte del JSX.

Otros hooks

Aquí tienes una lista de varios hooks populares en el ecosistema de React:

Más adelante profundizaremos en los hooks y hablaremos de otros con diferentes objetivos, que no tienen porque seguir la misma estructura o características de useState.