Lección 1 de 12 · Lectura y práctica

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.

Del concepto a la práctica

Taller de esta lección

Un custom hook debe encapsular una secuencia de comportamiento estable, no solo cambiar el nombre de varios useState. En una búsqueda local, por ejemplo, puede normalizar la consulta y derivar una lista visible; una búsqueda remota requeriría además controlar carga y resultados obsoletos sin decidir cómo se dibuja la lista.

Ejemplo resuelto

jsx

function useFilteredOrders(orders, query) {
  const normalized = query.trim().toLowerCase();
  return React.useMemo(
    () => orders.filter((o) => o.customer.toLowerCase().includes(normalized)),
    [orders, normalized]
  );
}

Con [{customer:"Ana"},{customer:"Bruno"}] y " an ", el resultado contiene solo Ana.

Pruébalo

Define tres pedidos con clientes distintos.
Llama al hook con espacios antes y después de "lu".
Comprueba que la salida conserva el objeto original y devuelve únicamente el cliente coincidente.

Comprueba tu resultado

Error frecuente: devolver nombres transformados y perder los registros originales. Corrígelo filtrando objetos y normalizando solo para comparar.

Ejercicio: agrega un cuarto pedido y cambia la consulta a una cadena ausente en los cuatro clientes, por ejemplo zzzz; el resultado esperado es un arreglo vacío, mientras que la lista original permanece con cuatro registros.

El mismo hook useContador se usa en dos instancias con contador 2 y 0; comparten lógica y mantienen estado independiente. — **Compartir lógica no comparte estado**
Dos componentes pueden usar el mismo custom hook y mantener estados independientes. Si A incrementa dos veces, B puede seguir en 0; compartir la implementación del hook no crea automáticamente un almacén global.
Ver la infografía en tamaño completo ↗

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.

Práctica acompañada: Una interfaz web de principio a fin

Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Estado, formularios y una API pequeña: HTML, Estado, Validación, Respuesta — De la idea al resultado: una secuencia para practicar y revisar.

Práctica: cuatro pruebas de comportamiento

Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.

Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.

Comprueba tu entrega

Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.

Sigue con React Intermedio: Patrones y Optimización

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

Siguiente: Compound Components: Composición Inteligente →Entrar y guardar mi progreso