Frontend Academy · Lección

Render Props y patrones HOC

Pase una función de renderizado como prop para inyectar UI y envuelva componentes en componentes de orden superior para inyectar comportamiento sin modificar el original.

Render Props y patrones HOC es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Dos patrones clásicos de reutilización

Antes de los hooks, en React 16.8, reutilizar lógica con estado significaba usar componentes de orden superior (HOC) o render props. Son poco habituales en código nuevo, pero aún aparecen en bases de código heredadas y en muchas bibliotecas.

Render props: la idea

Un componente acepta una función como prop, normalmente llamada render o children, y la invoca con su estado interno. Quien consume el componente decide qué representar con ese estado.

function Mouse({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return render(pos);
}

// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />

children como función

La prop children también puede ser una función: es el mismo patrón con un JSX más limpio.

function Mouse({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  /* ... */
  return children(pos);
}

<Mouse>
  {({ x, y }) => <p>{x}, {y}</p>}
</Mouse>

Componentes de orden superior: la idea

Un HOC es una función que recibe un componente y devuelve otro con props o comportamiento adicionales. Se utilizó mucho en connect() de Redux y withRouter() de React Router.

function withMouse(Component) {
  return function WithMouse(props) {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handler);
      return () => window.removeEventListener('mousemove', handler);
    }, []);
    return <Component {...props} mouse={pos} />;
  };
}

// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />

Los HOC se componen mediante envoltorios

Puede encadenar HOC, pero forman un «infierno de envoltorios» difícil de depurar.

// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)

Render props frente a HOC

Render props: más explícitas, compatibles con los tipos y sin colisiones de nombres. HOC: más declarativos; sin cuidado, hacen que los componentes envueltos pierdan sus tipos estáticos y pueden producir colisiones de nombres de props.

Por qué los hooks sustituyeron a ambos

Los hooks personalizados logran el mismo objetivo con menos complejidad: no requieren componentes envoltorio, argumentos de función anidados ni complicadas maniobras con tipos. Los hooks son la respuesta idiomática en 2025.

// Custom hook equivalent of useMouse:
function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

// Usage:
const { x, y } = useMouse();

Cuándo siguen siendo mejores los render props

En componentes que necesitan inyectar marcado, no solo estado, como las listas virtualizadas que representan elementos en posiciones concretas, los render props siguen siendo la opción natural.

function VirtualList({ items, itemHeight, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const start = Math.floor(scrollTop / itemHeight);
  const visible = items.slice(start, start + 20);
  return visible.map((item, i) => renderItem(item, start + i));
}

<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
  <Row key={i} data={item} />
)} />

Buenas prácticas para HOC (cuando son necesarios)

Si debe escribir un HOC: copie los métodos estáticos mediante hoist-non-react-statics, reenvíe las refs mediante React.forwardRef y conserve displayName para DevTools.

Reenvío de refs en HOC

De forma predeterminada, los HOC ocultan las refs. Use forwardRef para que quien consume el componente pueda seguir accediendo a la ref del componente subyacente.

function withLogger(Component) {
  const Wrapped = React.forwardRef((props, ref) => {
    console.log('rendering', Component.name);
    return <Component {...props} ref={ref} />;
  });
  Wrapped.displayName = `withLogger(${Component.name})`;
  return Wrapped;
}

Reconocer patrones heredados

Encontrará HOC y render props en react-redux, con su API antigua; Apollo Client v2; react-router v5, con withRouter; Formik, con Field; y styled-components, con withTheme. Refactorice a hooks cuando las API más recientes de estas bibliotecas lo permitan.

Comprobación rápida

¿Qué patrón han sustituido en gran medida los hooks para compartir lógica con estado entre componentes de React?

Repaso: render props y HOC

Render props: una función como prop que devuelve JSX, de forma explícita y compatible con los tipos. HOC: una función que envuelve un componente, utilizada por bibliotecas antiguas mediante connect y withRouter. Los hooks personalizados sustituyeron a ambos para la lógica de estado. Los render props siguen siendo mejores cuando necesita inyectar marcado personalizado, como en listas virtualizadas. Al escribir HOC: use forwardRef, eleve los métodos estáticos y establezca displayName.

Preguntas frecuentes

¿La lección «Render Props y patrones HOC» es gratis?

Sí — el texto completo de «Render Props y patrones HOC» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Render Props y patrones HOC»?

Pase una función de renderizado como prop para inyectar UI y envuelva componentes en componentes de orden superior para inyectar comportamiento sin modificar el original. Practicas Frontend 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 Frontend Academy?

No se requiere experiencia previa. Frontend 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 2 de 4.

¿Cuánto tiempo toma la lección «Render Props y patrones HOC»?

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 Frontend Academy?

Sí. Cada lección de Frontend 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

← Volver a Frontend Academy