A function for rendering
A render prop is a prop whose value is a function that returns markup. The component owns some behavior, such as tracking the mouse or loading data, and calls the function with that data so the caller decides what to draw. This separates behavior from presentation.
- The component manages the state or side effect.
- It calls the provided function with the current data.
- The caller returns whatever output it wants.
When to reach for it
Render props shine when many screens need the same behavior but different visuals. The pattern predates custom hooks and remains useful when the shared thing must also render wrapping markup or manage children directly.
- It inverts control so the caller owns the view.
- It avoids duplicating the behavior across screens.
- Custom hooks now cover many former render prop cases.
Overusing nested render props can create deeply indented trees, which is one reason hooks often read more cleanly today.
Key idea
A render prop passes a function that the component calls with its data, sharing behavior while letting the caller control the rendered output.