Interview · Patterns
Render Props
Delegating what to render
The Render Props pattern consists of passing a function as a prop that the component calls to get JSX. The component controls when and with what data it renders; the parent controls what is rendered with that data.
The core idea
Instead of the component deciding its own output, it receives a render function (or children as a function) and calls it with its internal data. The parent receives that data and returns JSX — separating logic from presentation.
Render Props vs hooks
Hooks solve the same problem (sharing logic) more directly. Today render props mainly appear in UI libraries like Headless UI or Radix, where accessibility logic is completely separated from visual presentation.
Common pitfalls
- 01Render Props defined inline (render={() => <Child/>}) create a new function on every parent render, potentially breaking memoization.
- 02Deeply nested Render Props create 'callback hell' — today custom hooks are usually the cleaner solution.
- 03The name 'render prop' refers to the pattern, not to a prop literally named 'render' — it can be children or any name.
Was this helpful?
Sign in to give feedback