Entrevista · Patrones
Render Props
Delegar el qué renderizar
El patrón Render Props consiste en pasar una función como prop que el componente llama para obtener JSX. El componente controla cuándo y con qué datos renderiza; el padre controla qué se renderiza con esos datos.
La idea central
En lugar de que el componente decida su propio output, recibe una función render (o children como función) y la invoca con sus datos internos. El padre recibe esos datos y devuelve JSX — separando lógica de presentación.
Render Props vs hooks
Los hooks resuelven el mismo problema (compartir lógica) de forma más directa. Hoy el patrón render props aparece principalmente en librerías de UI como Headless UI o Radix, donde la lógica de accesibilidad se separa completamente de la presentación visual.
Tropiezos comunes
- 01Si pasas una función flecha inline como render prop, se crea una nueva función en cada render — puede romper React.memo en componentes hijos.
- 02Children como función (children prop) es funcionalmente idéntico a render prop — es solo una convención de nombre.
- 03Para lógica pura sin JSX propio, un custom hook es siempre más limpio que render props.
¿Fue útil?
Inicia sesión para dar feedback