Qué son los Hooks en React y cómo utilizarlos

Tiempo de lectura: 3 minutos

Los Hooks son una de las características más importantes introducidas en React para facilitar la reutilización de lógica y simplificar el desarrollo de componentes. Permiten utilizar funcionalidades de React, como el estado o el ciclo de vida, dentro de componentes funcionales, sin necesidad de usar clases.

En este tutorial aprenderás qué son los Hooks, por qué existen y cómo utilizar los más importantes.

Qué son los Hooks en React

Los Hooks son funciones especiales que permiten «engancharse» a características internas de React desde componentes funcionales. Antes de su aparición, solo los componentes basados en clases podían manejar estado y ciclo de vida.

Gracias a los Hooks, ahora es posible:

• Manejar estado
• Ejecutar efectos secundarios
• Compartir lógica entre componentes
• Acceder al contexto de React
• Optimizar el rendimiento

Los Hooks siempre empiezan con la palabra use, lo que permite identificarlos fácilmente.

Por qué se crearon los Hooks

Los Hooks nacieron para resolver varios problemas comunes en React:

Primero, los componentes basados en clases eran más complejos de entender y mantener.

Segundo, compartir lógica entre componentes solía requerir patrones complicados como Higher Order Components o Render Props.

Tercero, la lógica relacionada a una misma funcionalidad quedaba dispersa en distintos métodos del ciclo de vida.

Los Hooks solucionan estos problemas permitiendo organizar la lógica por funcionalidad y no por fase del ciclo de vida.

Reglas de los Hooks

Antes de utilizarlos, es importante conocer sus reglas principales.

Los Hooks solo pueden usarse dentro de componentes funcionales o dentro de otros Hooks personalizados.

Los Hooks deben llamarse siempre en el nivel superior del componente, nunca dentro de condiciones, bucles o funciones internas.

Estas reglas garantizan que React pueda controlar correctamente el orden de ejecución.

Hook useState

El Hook useState permite añadir estado a un componente funcional.

Ejemplo básico:

import { useState } from "react";

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>{contador}</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Este Hook devuelve un valor y una función que permite actualizarlo.

Hook useEffect

El Hook useEffect permite ejecutar efectos secundarios dentro de un componente. Algunos ejemplos son:

• Llamadas a APIs
• Suscripciones
• Manipulación del DOM
• Temporizadores

Ejemplo:

import { useEffect, useState } from "react";

function Ejemplo() {
  const [contador, setContador] = useState(0);

  useEffect(() => {
    document.title = `Clicks: ${contador}`;
  }, [contador]);

  return (
    <button onClick={() => setContador(contador + 1)}>
      Incrementar
    </button>
  );
}

El segundo parámetro es un array de dependencias. El efecto se ejecuta cuando alguna de ellas cambia.

Si el array está vacío, el efecto solo se ejecuta al montar el componente.

Hook useContext

useContext permite acceder a valores compartidos entre componentes sin necesidad de pasar props manualmente.

Primero se crea un contexto:

import { createContext } from "react";

export const TemaContext = createContext();

Después se usa dentro de un componente:

import { useContext } from "react";
import { TemaContext } from "./TemaContext";

function Boton() {
  const tema = useContext(TemaContext);

  return <button style={{ background: tema }}>Botón</button>;
}

Este Hook facilita compartir datos globales como temas visuales, usuario autenticado o configuraciones.

Hook useRef

useRef permite almacenar valores que persisten entre renders sin provocar un nuevo renderizado cuando cambian.

También se usa para acceder directamente a elementos del DOM.

Ejemplo:

import { useRef } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  const enfocar = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={enfocar}>Enfocar input</button>
    </>
  );
}

Hook useMemo

useMemo permite memorizar resultados de cálculos costosos para mejorar el rendimiento.

Ejemplo:

import { useMemo } from "react";

function Calculo({ numero }) {
  const resultado = useMemo(() => {
    console.log("Calculando...");
    return numero * 2;
  }, [numero]);

  return <p>{resultado}</p>;
}

El cálculo solo se ejecuta cuando cambia la dependencia.

Hook useCallback

useCallback memoriza funciones para evitar recrearlas innecesariamente, lo que puede mejorar el rendimiento en componentes hijos.

Ejemplo:

import { useCallback } from "react";

function Ejemplo({ onClick }) {
  const manejarClick = useCallback(() => {
    console.log("Click");
  }, []);

  return <button onClick={manejarClick}>Click</button>;
}

Hooks personalizados

También puedes crear tus propios Hooks para reutilizar lógica.

Ejemplo:

import { useState } from "react";

function useContador(inicial = 0) {
  const [valor, setValor] = useState(inicial);

  const incrementar = () => setValor(valor + 1);
  const decrementar = () => setValor(valor - 1);

  return { valor, incrementar, decrementar };
}

Uso del Hook:

function App() {
  const { valor, incrementar } = useContador();

  return (
    <div>
      <p>{valor}</p>
      <button onClick={incrementar}>Sumar</button>
    </div>
  );
}