What are render props in React?
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.