Custom Hooks: Abstrayendo Lógica Compleja

Custom Hooks: abstrayendo lógica compleja

Un custom hook permite extraer lógica reutilizable de un componente sin convertir esa lógica en un componente visual. Es una herramienta clave cuando varios componentes necesitan manejar el mismo estado, efectos, sincronización o llamadas a APIs.

Cuándo crear un custom hook

• Cuando dos o más componentes repiten el mismo useEffect, estado o lógica de carga.


• Cuando querés separar lógica de negocio de la UI.


• Cuando una interacción tiene estados claros: loading, error, success, empty.


• Cuando necesitás testear lógica sin renderizar toda una pantalla compleja.

Ejemplo: hook de búsqueda

import { useEffect, useState } from "react";



export function useSearch(query) {

  const [data, setData] = useState([]);

  const [loading, setLoading] = useState(false);

  const [error, setError] = useState(null);



  useEffect(() => {

    if (!query) return;



    let cancelled = false;

    setLoading(true);

    setError(null);



    fetch("/api/search?q=" + encodeURIComponent(query))

      .then((response) => {

        if (!response.ok) throw new Error("Search failed");

        return response.json();

      })

      .then((result) => {

        if (!cancelled) setData(result.items);

      })

      .catch((err) => {

        if (!cancelled) setError(err);

      })

      .finally(() => {

        if (!cancelled) setLoading(false);

      });



    return () => {

      cancelled = true;

    };

  }, [query]);



  return { data, loading, error };

}

Ejercicio: extraer un hook real

Tomá un componente con carga de datos y extraé la lógica a un custom hook. El componente final debería ocuparse solo de renderizar estados: cargando, error, vacío y contenido.

Checklist

• El hook empieza con use.


• El componente ya no contiene la lógica de fetch completa.


• El hook devuelve datos, loading y error.


• Existe limpieza para evitar actualizar estado si el componente se desmonta.