Beginner LevelReact JS & React 19
What is the Render Props pattern in React?
❓ Interview Prompt: Explain Render Props pattern, passing functions as JSX children/props, dynamic UI rendering, and sharing stateful logic.
The Render Props pattern refers to a technique for sharing code between React components using a prop whose value is a function that returns JSX:
How It Works:
Instead of hardcoding what to render, a component delegates UI rendering to a function prop passed by the parent (e.g. '<MouseTracker render={({ x, y }) => <Cursor x={x} y={y} />} />').
Code Implementation Example
jsx
function MouseTracker({ render }) {
const [coords, setCoords] = useState({ x: 0, y: 0 });
const handleMouseMove = (e) => setCoords({ x: e.clientX, y: e.clientY });
return (
<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
{render(coords)} {/* Delegates UI rendering to render function! */}
</div>
);
}
// Usage:
<MouseTracker render={({ x, y }) => <h1>Mouse at {x}, {y}</h1>} />💡Sharing stateful mouse coordinate tracking using Render Props pattern.
🎯 Interview Key Takeaway
The Render Props pattern uses a function prop to share stateful logic while letting parents control UI rendering.
#Render Props#Patterns#JSX#Beginner
Back to all React JS & React 19 Questions→