Render props

A render prop is a function prop — often `children` as a function — that lets a parent component own state and logic while the consumer decides markup. It was common before hooks for sharing behavior like mouse tracking or data subscriptions.

Hooks largely replaced render props for logic reuse, but the pattern still appears in libraries and when consumers need full control of rendered output. Avoid inline function children on hot paths if they defeat memoization.

					<MouseTracker render={({ x, y }) => <div style={{ left: x, top: y }} />} />
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Parent owns state; child function owns JSX.
• Consider custom hooks as modern alternative.
• Watch referential churn with inline render fns.