Explain Render Props Pattern in React

44 / 100

Patternsintermediate

Render Props Pattern

Learn how the render props pattern shares logic by passing a function as a prop that returns JSX.

The render props pattern shares reusable behavior by having a component accept a function as a prop (often literally called render or passed as children) and calling that function with some internal state or data, letting the consumer decide what to render with it. The component owning the logic doesn't dictate the UI at all — it just supplies data via the function's arguments.

A render prop component is like a tour guide who narrates facts (the shared data) as you walk, but hands you a blank photo frame at each stop and lets you decide exactly what picture to take and how to caption it — the guide supplies the information, you control the output.

Key Concepts

This pattern predates hooks and was one of the primary ways to share stateful logic across components before custom hooks existed, alongside higher-order components. A <MouseTracker render={(pos) => <p>{pos.x}, {pos.y}</p>} /> component tracks mouse position internally and lets the consumer fully control how that position is displayed.

Since the introduction of hooks, custom hooks have largely replaced render props for pure logic-sharing, since a hook avoids the extra component nesting ('wrapper hell') that render props (and HOCs) tend to introduce, and reads more naturally as a plain function call rather than an inversion-of-control through JSX. However, render props remain useful specifically when a component needs to control *when and how children render*, not just supply data — for example, a <List renderItem={...}> that controls iteration but still delegates each item's markup to the consumer.

Interviewers often ask candidates to convert a render-props component into an equivalent custom hook, and to explain the remaining, narrower cases (like controlling per-item rendering in a list, not just sharing state logic) where render props are still the more natural choice over a hook.