Render Props in React
From the React Components & JSX cheat sheet · Component Patterns & Types · verified Jul 2026
Render Props
Share logic by passing a render function as a prop
jsx
function MouseTracker({ render }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const move = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', move);
return () => window.removeEventListener('mousemove', move);
}, []);
return render(pos);
}
<MouseTracker render={({ x, y }) => <p>{x}, {y}</p>} />💡 Render props let a component share state/logic while letting consumers control rendering
⚡ Modern React replaces most render props with custom hooks for cleaner JSX
📌 Render props are still useful when you need access to the component lifecycle in JSX
🟢 Children-as-function is a render prop variant — same idea, cleaner syntax
render-propspattern