What are Render Props?

Question

Accepted Answer

Render Props is a pattern where **a component receives a function through a prop and calls it for rendering**. Appeared before hooks, now almost not used. **Simple analogy:** Imagine you are ordering pizza with different fillings. - Component (pizzeria) gives you the base (dough). - Render prop — is your choice: "Make it with cheese" or "Make it with mushrooms". - Result: you have a ready pizza (rendered component). **What it looks like:** ```jsx // Component that tracks mouse position class MouseTracker extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (e) => { this.setState({ x: e.clientX, y: e.clientY }); }; render() { return (

{this.props.render(this.state)} {/* Calling render prop! */}

); } } // Usage (

Position: {x}, {y}

)} /> ``` **Why this is outdated:** Hooks do the same thing simpler: ```jsx function useMousePosition() { const [pos, setPos] = useState({ x: 0, y: 0 }); useEffect(() => { const handler = (e) => setPos({ x: e.clientX, y: e.clientY }); window.addEventListener('mousemove', handler); return () => window.removeEventListener('mousemove', handler); }, []); return pos; } function Component() { const { x, y } = useMousePosition(); return

Position: {x}, {y}

; } ``` **When it might be useful:** If you are maintaining old class component code. For new projects use custom hooks.

React: What are Render Props?