What is the render props pattern?

Short answer: The render props pattern is a technique for sharing code between components using a prop whose value is a function (a “render prop”). This function can return JSX or other values, allowing more dynamic behavior and custom rendering. Purpose: It enables a component to expose its logic while letting its consumers define how the output is rendered.

Example code

class MouseTracker extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY, }); }; render() { return ( <div onMouseMove={this.handleMouseMove}> {this.props.render(this.state)} </div> ); } } const App = () => ( <MouseTracker render={({ x, y }) => ( <h1>The mouse position is ({x}, {y})</h1> )} /> ); In this example, MouseTracker uses the render prop pattern to allow the parent component to decide how to render the mouse position data.

Real-world example (ShopNest)

ProductCard receives price via props. The parent Catalog owns selected filters in state and passes them down.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.