Custom hooks: reutilizar lógica de verdad

Un custom hook no reutiliza UI. Reutiliza lógica de estado y efectos.

Se reconoce porque su nombre empieza por use.

Ejemplo claro

import { useEffect, useState } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

function StatusBadge() {
  const isOnline = useOnlineStatus();
  return <p>{isOnline ? 'Online' : 'Offline'}</p>;
}

Cuándo compensa extraerlo

• la lógica se repite
• la lógica es larga y distrae del componente
• varias piezas dependen del mismo comportamiento

Cuándo no

• solo para “tener menos líneas”
• si el hook mezcla demasiadas responsabilidades
• si oculta tanto que ya no entiendes qué está pasando

Regla práctica

Un buen custom hook suele responder a una pregunta clara:

• useOnlineStatus
• useDebouncedValue
• useLocalStorage
• useModal

Si no puedes nombrarlo con claridad, probablemente aún no has aislado bien la lógica.

La siguiente lección entra en Suspense, que sí, se sigue usando, pero no como mucha gente cree.