What are render props in React?
Why Interviewers Ask This
This is a classic screening question for React.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
The render props pattern passes a function as a prop (usually called render or children) that a component calls to know what to render. This allows sharing code between components. Example: class MouseTracker extends React.Component { state = { x: 0, y: 0 }; handleMove = e => this.setState({ x: e.clientX, y: e.clientY }); render() { return <div onMouseMove={this.handleMove}>{this.props.render(this.state)}</div>; } }. Usage: <MouseTracker render={({ x, y }) => <p>{x}, {y}</p>} />. The MouseTracker encapsulates the mouse-tracking logic; the render prop decides what to display with that data. Children as a function: same pattern using children: <MouseTracker>{({ x, y }) => <p>{x}, {y}</p>}</MouseTracker>. Render props vs HOCs vs Hooks: hooks have largely replaced both patterns for sharing stateful logic — they are simpler, less nesting, and more composable. Render props remain useful for cases that require rendering flexibility based on encapsulated logic.
Common Mistake
Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex React.js answers easy to follow.