React Academy · Lección

Patrón de render props

Pase una función como prop que devuelva JSX para compartir comportamiento sin acoplar la UI.

Patrón de render props es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 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 comprenderá el patrón render props —pasar una función como prop que devuelve JSX— y aprenderá cuándo resulta útil para compartir comportamiento entre componentes.

¿Qué son las render props?

Render props es un patrón en el que un componente acepta una prop que es una función. El componente llama a esta función para generar su salida renderizada. El consumidor controla la interfaz; el componente proporciona el comportamiento.

<DataProvider render={data => <UserCard user={data} />} />

Ejemplo sencillo de render prop

Un componente Toggle gestiona el estado abierto/cerrado y llama a una render prop con el estado actual y una función para alternarlo. El consumidor decide cómo renderizarlo.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Usar children como render prop

En lugar de una render prop con nombre, puede usar `children` como función. Muchas bibliotecas (React Router v5, Formik) utilizan este patrón, que a veces se denomina «children como función».

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Rastreador de la posición del ratón

Un ejemplo clásico de render props: un componente MouseTracker rastrea la posición del cursor y la pasa a una render prop. Cualquier consumidor puede mostrar la posición como prefiera.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Render props frente a custom hooks

Las render props eran el patrón habitual antes de los hooks. Ahora los custom hooks hacen lo mismo de forma más sencilla: el hook devuelve datos y funciones, y el componente los utiliza en su propio JSX. Los hooks son la opción preferida en React moderno.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Cuándo siguen teniendo sentido las render props

Las render props siguen siendo útiles cuando: (1) necesita inyectar un renderizado dinámico en una ubicación específica del árbol, (2) está creando una biblioteca de componentes headless que separa la lógica de la interfaz.

Advertencia de rendimiento

Definir una render prop en línea crea una función nueva en cada renderizado del padre, lo que impide que los hijos PureComponent/React.memo eviten volver a renderizarse. Extraiga las funciones de render prop a una variable o método estable.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Composición de render props

Anidar varios componentes con render props crea rápidamente el «infierno de render props» o el «infierno de wrappers»: callbacks profundamente anidados que son difíciles de leer. Esta es una de las razones por las que se introdujeron los hooks.

Render props en bibliotecas

React Router v5 utilizaba render props para Route. Downshift, Formik y React-Table también utilizan variantes de este patrón. Comprender las render props le ayuda a leer y depurar código que utiliza estas bibliotecas.

Comprobación rápida

¿Cuál es la principal ventaja del patrón render props frente a pasar JSX estático?

Resumen

Las render props pasan una función que devuelve JSX. El componente proporciona el comportamiento y el consumidor proporciona la interfaz. Prefiera los custom hooks en React moderno, pero comprenda las render props para leer código existente y crear componentes headless.

A continuación

Siguiente lección: **Componentes de orden superior (HOC) explicados** — envolverá componentes para inyectar props, proteger rutas o añadir registros.

Preguntas frecuentes

¿La lección «Patrón de render props» es gratis?

Sí — el texto completo de «Patrón de render props» 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 «Patrón de render props»?

Pase una función como prop que devuelva JSX para compartir comportamiento sin acoplar la UI. 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 1 de 4.

¿Cuánto tiempo toma la lección «Patrón de render props»?

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