React Academy · Lección

HOC frente a render props y custom hooks

Compare las tres estrategias para compartir código en cuanto a legibilidad, pruebas y composición.

HOC frente a render props y custom hooks es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 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 comparará los HOC, las render props y los custom hooks en cuanto a legibilidad, facilidad de prueba, composabilidad y los casos en los que cada uno es la herramienta adecuada.

El problema que resuelven los tres

Los tres patrones existen para compartir lógica con estado o comportamiento entre varios componentes, sin copiar y pegar código.

Ventajas de los HOC

Los HOC funcionan con componentes de clase (antes de los hooks), se integran perfectamente con bibliotecas que no admiten hooks y pueden aplicarse de forma transparente sin cambiar el código fuente del componente envuelto.

Desventajas de los HOC

Los HOC crean un infierno de wrappers en DevTools, pueden provocar colisiones de props si dos HOC inyectan una prop con el mismo nombre y son más difíciles de tipar correctamente en TypeScript. Las refs deben reenviarse de forma explícita.

Ventajas de las render props

Las render props hacen explícito el flujo de datos: puede ver exactamente qué valores expone el proveedor del comportamiento. Funcionan tanto en componentes de clase como de función y son excelentes para las API de componentes headless.

Desventajas de las render props

Los callbacks anidados de las render props crean un «infierno de callbacks». Las funciones de render prop en línea rompen la memorización. Añaden ruido visual en comparación con una llamada sencilla a un hook.

Ventajas de los custom hooks

Los custom hooks son los más composables: puede llamar a varios hooks, combinarlos y mantener limpio el JSX del componente. Es fácil probarlos de forma aislada. Los tipos de TypeScript son sencillos.

const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

Desventajas de los custom hooks

Los custom hooks solo funcionan en componentes de función (no en componentes de clase). No pueden inyectar JSX: solo devuelven datos y funciones. Algunos casos de uso (como los protectores de autenticación que redirigen) requieren HOC o componentes envolventes.

Guía para decidir

¿Necesita redirigir o proteger una ruta? Use un HOC o un componente envolvente. ¿Está creando una biblioteca de interfaz headless? Use render props o hooks. ¿Comparte lógica con estado en componentes de función? Use un custom hook. ¿Envuelve un componente de clase o de terceros? Use un HOC.

Predeterminado moderno: hooks primero

En una base de código moderna de React (con todos los componentes de función), los custom hooks son la opción predeterminada. Recurra a los HOC o a las render props solo cuando los hooks no puedan resolver el problema.

Comprobación rápida

¿Qué patrón para compartir código se recomienda como opción predeterminada para extraer lógica con estado en componentes de función de React moderno?

Resumen

Los HOC, las render props y los custom hooks comparten lógica. Los hooks son la opción moderna predeterminada: limpios, composables y fáciles de probar. Los HOC sirven para componentes de clase y protectores de rutas. Las render props, para interfaces headless. Elija según el contexto.

A continuación

Siguiente lección: **Refactorización de un HOC a un custom hook** — convertirá paso a paso un HOC withAuth en un hook useAuth.

Preguntas frecuentes

¿La lección «HOC frente a render props y custom hooks» es gratis?

Sí — el texto completo de «HOC frente a render props y custom hooks» 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 «HOC frente a render props y custom hooks»?

Compare las tres estrategias para compartir código en cuanto a legibilidad, pruebas y composición. 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 3 de 4.

¿Cuánto tiempo toma la lección «HOC frente a render props y custom hooks»?

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