Introducción a los Hooks

Los Hooks aparecieron en la versión 16.8 de React. The one with hooks.

Los Hooks te permiten tener en un componente de tipo función, cualidades que solo se tenían en un componente de tipo clase; como usar un estado. También puedes combinarlos para crear los tuyos.

import React, { useState } from 'react';

function Example() {
  // Declaramos un estado al que llamaremos "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Haz presionado {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Presiona
      </button>
    </div>
  );
}

Este Hook useState es el primer Hook que aprenderemos, es solo una función, y es el Hook que usarás más frecuentemente.

En esta lección aprenderás:

1. Qué son los Hooks y qué problema resuelven
2. Cómo usarlos en componentes de tipo función
3. Cuales son las reglas a tener en mente al usarlos
4. Cómo crear tus propios Hooks

Problemas que los hooks resuelven y sus ventajas

React no proporcionaba ninguna herramienta para escribir comportamiento reutilizable en un componente. Y existían cualidades solo disponibles en componentes de tipo clase. Se utilizaban algunos patterns para lidiar con esto, como las render props o los higher-order components.

Uno de los problemas que se tenían con el uso de estos patterns, es que los componentes se volvían muy complejos, por ejemplo cuando se usaban las diferentes funciones incluidas en el ciclo de vida de un componente de tipo clase. Como son: componentDidMount, componentWillUnmount y componentDidUpdate.

Pero ahora con los Hooks tenemos una serie de ventajas que nos liberan del uso de estos patterns clásicos, simplificando nuestro trabajo.

Ventajas como:

1. No necesitamos de una clase. La principal ventaja es que podemos hacer todo para lo que necesitábamos una clase pero en un componente de tipo función; qué es más simple y ligero.
2. 100% opcionales. Puedes aprender a utilizar los Hooks uno por uno, conforme los vas necesitando.
3. 100% compatibles. Los Hooks no tienen problemas de compatibilidad con versiones anteriores o con código legacy, lo cual es una buena noticia.
4. Disponibles desde la versión 16.8. Al momento de diseñar esta lección, nos encontramos en la versión 18 de React, así que los Hooks ya están disponibles de forma estable.

¿Cómo usamos los Hooks?

Comencemos con el primero y más popular de todos los Hooks de React.

Casi todos los Hooks se utilizan igual, excepto por useEffect, pero no te preocupes por él ahora, tenemos una lección solo para este Hook. Por ahora al aprender a utilizar useState prácticamente aprenderemos cómo usarlos todos.

Piensa en un estado como una memoria, una herramienta para recordar información entre re-renders. Como cuando quieres recordar lo que el usuario ha escrito en un <input/> por ejemplo.

Para recordar esa información en nuestros componentes podemos usar useState de la siguiente manera.

function LoginForm(){
	const [email, setEmail] = useState('');
  // ...
}

Es relativamente fácil utilizar un Hook ¿no crees? Esto es porque son solo funciones.

Invocamos a useState pasando el valor inicial de nuestro estado (string vacío ‘’). Esta función o Hook, nos devolverá un array; por eso utilizamos *destructuring (*desestructuración) **para recibirlos individualmente. 🤯

El primer elemento del array es una variable con el valor reactivo donde almacenaremos la información, y el segundo elemento es una función que nos ayuda a actualizar/cambiar ese valor.

👀 El segundo elemento del array es importante para lograr actualizar el valor y que el VirtualDOM de React actualice correctamente el UI.

Algunas reglas de los Hooks

Ya sabemos que los Hooks te permiten usar estado y otras características de React sin escribir una clase. Pero debemos tener dos reglas importantes en mente a la hora de usarlos.

La primer regla es no llamar a ningún Hook dentro de ciclos, condicionales o funciones anidadas. Siempre invocaremos a cualquier Hook en el nivel superior de la función.

function LoginForm(){
  // Invocamos a los Hooks en el nivel superior.
	const [email, setEmail] = useState('');
  // otros hooks
	const ref = useRef();
	useEffect(//...);
  // lo demás...
	const esteEsUnHandler = () => {};
	const otrasFunciones = () => {};
	const uOtrasVariables = "REGULAR_VARIABLES";
}

La segunda regla, es que solo podemos llamar Hooks en funciones que son componentes, no en funciones regulares, es decir, puedes llamar Hooks desde componentes o Hooks personalizados (customHooks que veremos en un momento).

Una ultima regla; más que una regla es una cualidad: los Hooks son independientes entre sí, lo que permite utilizarlos múltiples veces en el mismo componente sin ningún problema, esto ayuda a mantener el orden y la simplicidad en tus componentes. ¿Genial no? 🍕

function Form() {
  // 1. Usa la variable de estado del nombre
  const [mariaName, setMariaName] = useState('Maria');
  const [blissName, setBlissName] = useState('Blissmo');
	const [perroName, setPerroName] = useState('Perro');
	const [klaraName, setKlaraName] = useState('Klara');

// ...

Como puedes darte cuenta, el destructuring aquí es muy útil para nombrar nuestros estados.

Custom Hooks

En fixter tenemos toda una guía para aprender a crear tus propios Hooks, puedes revisarla gratis aquí.

Los Hooks al ser solo funciones, nos permiten también crear los nuestros con facilidad.

Lo único que necesitamos es crear una función que comience con el nombre use como única regla. Lo que nos permite emplear otros Hooks dentro, pues un Hook no es componente.

👀 Recuerda que los Hooks pueden usarse solo dentro de componentes u otros Hooks.

¿Para qué escribiríamos un Hook personalizado? pues para reutilizar lógica en diferentes componentes.

export default function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  })
  // Podemos usar otros Hooks
  useEventListener("resize", () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight })
  })

  return windowSize
}

Nota que podemos utilizar cualquier otro Hook o Custom Hook dentro de nuestros Hooks personalizados.

La Recomendación de la documentación oficial de React es:

Que siempre tengas instalado ESLint para que su linterna nos indique todas las reglas de forma automática mientras programamos. Pero, no te preocupes, en este curso utilizamos Vite, que ya incluye esta linterna bien configurada. ✅

Enlaces relacionados

Docs en español Guía Gratis Custom Hooks