Custom Hooks en React: cómo crear y reutilizar lógica en tus componentes

Tiempo de lectura: 2 minutos

En React, los Hooks nos permiten gestionar estado, efectos y otras funcionalidades dentro de componentes funcionales. Pero, ¿qué pasa cuando necesitas reutilizar la misma lógica en varios componentes? Ahí es donde entran los Custom Hooks.

En este tutorial aprenderás qué son los Custom Hooks, cómo crearlos y cómo usarlos para mantener tu código limpio, modular y reutilizable.

Qué son los Custom Hooks

Un Custom Hook es una función en JavaScript que empieza con la palabra use y permite encapsular lógica relacionada con estado, efectos o cualquier comportamiento de React.

Los Custom Hooks permiten:

• Reutilizar lógica entre componentes
• Separar responsabilidades
• Mantener el código más limpio y legible
• Facilitar pruebas y mantenimiento

Se comportan igual que cualquier Hook nativo, como useState o useEffect.

Cómo crear un Custom Hook

Para crear un Custom Hook solo necesitas definir una función que use Hooks internos y devuelva los valores o funciones que necesites.

Ejemplo básico: contador reutilizable

import { useState } from "react";

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

  const incrementar = () => setContador(contador + 1);
  const decrementar = () => setContador(contador - 1);
  const reiniciar = () => setContador(inicial);

  return { contador, incrementar, decrementar, reiniciar };
}

export default useContador;

Este Hook encapsula la lógica de un contador y puede usarse en cualquier componente.

Cómo usar un Custom Hook

Una vez creado, puedes importarlo y usarlo como cualquier Hook nativo.

import useContador from "./useContador";

function App() {
  const { contador, incrementar, decrementar, reiniciar } = useContador(5);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={incrementar}>Sumar</button>
      <button onClick={decrementar}>Restar</button>
      <button onClick={reiniciar}>Reiniciar</button>
    </div>
  );
}

Cada vez que necesites un contador en otro componente, puedes reutilizar useContador sin repetir código.

Custom Hooks con efectos

Los Custom Hooks también pueden manejar efectos, como llamadas a APIs.

Ejemplo: Hook para obtener datos

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Uso del Hook:

import useFetch from "./useFetch";

function App() {
  const { data, loading, error } = useFetch("https://api.example.com/users");

  if (loading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Este Hook centraliza toda la lógica de la petición, haciendo que los componentes sean más limpios y fáciles de mantener.