React Academy · Lección

Refactorizar un HOC a un custom hook

Convierta paso a paso un HOC withAuth en un hook useAuth.

Refactorizar un HOC a un custom hook es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenido

En esta lección refactorizará paso a paso un HOC withAuth para convertirlo en un custom hook useAuth y verá exactamente por qué la versión con hook es más limpia y fácil de probar.

El HOC withAuth (punto de partida)

El HOC recibe un componente, comprueba si el usuario está autenticado y redirige a /login si no lo está. Inyecta el usuario como prop.

function withAuth(Component) {
  return function AuthGuard(props) {
    const { user, loading } = useAuthState();
    if (loading) return <Spinner />;
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} user={user} />;
  };
}

const ProtectedPage = withAuth(MyPage);

Problemas del HOC

El HOC: (1) añade un wrapper en DevTools, (2) inyecta implícitamente la prop `user`; el componente debe saber que debe esperarla, (3) es difícil de probar sin renderizar el wrapper completo del HOC, (4) no se puede componer fácilmente con otros hooks.

Paso 1: Extraer la lógica a un hook

Mueva toda la lógica del HOC a un custom hook. El hook devuelve directamente el estado de autenticación: sin wrappers ni inyección de props.

function useAuth() {
  const { user, loading } = useAuthState();
  return { user, loading, isAuthenticated: !!user };
}

Paso 2: Gestionar las redirecciones en el hook

Mueva la lógica de redirección a un hook independiente (por ejemplo, useRequireAuth) que llame internamente a navigate y devuelva el usuario.

function useRequireAuth(redirectTo = '/login') {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) navigate(redirectTo);
  }, [user, loading, navigate, redirectTo]);

  return { user, loading };
}

Paso 3: Actualizar el componente

Sustituya el wrapper del HOC por una llamada directa al hook dentro del componente. El componente llama explícitamente a useRequireAuth y gestiona la carga. Ahora su dependencia es visible.

function MyPage() {
  const { user, loading } = useRequireAuth();
  if (loading) return <Spinner />;
  return <p>Hello, {user.name}</p>;
}

Comparación de ventajas

La versión con hook: (1) no tiene un wrapper adicional en DevTools, (2) declara explícitamente la dependencia: puede ver `useRequireAuth` en el componente, (3) se puede probar simulando el hook, (4) se puede componer con otros hooks en el mismo componente.

Probar la versión con hook

Simule useRequireAuth en la prueba sustituyendo la exportación de su módulo. La prueba del componente solo necesita renderizar el componente y comprobar la salida; no requiere configurar ningún HOC.

vi.mock('./useRequireAuth', () => ({
  useRequireAuth: () => ({ user: mockUser, loading: false })
}));

render(<MyPage />);
expect(screen.getByText('Hello, Alice')).toBeInTheDocument();

Cuándo conservar un HOC

Conserve el HOC si necesita proteger muchos componentes de forma declarativa (por ejemplo, en las definiciones de rutas) y no quiere añadir la llamada al hook en cada uno. Incluso puede crear el HOC SOBRE el hook.

function withAuth(Component) {
  return function (props) {
    const { user, loading } = useRequireAuth();
    if (loading) return <Spinner />;
    return <Component {...props} user={user} />;
  };
}

Lo mejor de ambos enfoques

La arquitectura final: un hook useRequireAuth para usarlo directamente en los componentes Y un HOC withAuth ligero construido sobre él para la protección declarativa de rutas. Ambos comparten la misma lógica del hook.

Comprobación rápida

¿Cuál es la principal ventaja de llamar a useRequireAuth dentro de un componente en lugar de envolverlo con un HOC withAuth?

Resumen

Refactorice los HOC a hooks extrayendo la lógica a un custom hook, trasladando los efectos secundarios (como las redirecciones) al hook y llamándolo directamente en el componente. Cree un HOC ligero sobre el hook cuando necesite un envoltorio declarativo.

Curso completado

¡Enhorabuena! Ha terminado **Patrones de React: render props y HOC**. Ahora comprende ambos patrones clásicos, sus ventajas y desventajas, y cómo refactorizarlos para usar custom hooks modernos.

Preguntas frecuentes

¿La lección «Refactorizar un HOC a un custom hook» es gratis?

Sí — el texto completo de «Refactorizar un HOC a un custom hook» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Refactorizar un HOC a un custom hook»?

Convierta paso a paso un HOC withAuth en un hook useAuth. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Refactorizar un HOC a un custom hook»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Patrón de render props
Explicación de los componentes de orden superior (HOC)
HOC frente a render props y custom hooks
Refactorizar un HOC a un custom hook

← Volver a React Academy