Render Props
A render prop is a prop whose value is a function that returns JSX. The component calls this function to render part of its UI, passing it internal state or behavior. It's a technique for sharing logic between components.
Render props are a fill-in-the-blank form — the component writes the questions (state/logic) and leaves blanks (render prop) for you to write your own answers (UI).
Classic example: <Mouse render={({ x, y }) => <Cursor x={x} y={y} />} />. The Mouse component tracks position and delegates rendering to the consumer. This pattern was popular pre-hooks for sharing stateful logic. The children-as-a-function variant uses children as the render prop: <Mouse>{({ x, y }) => ...}</Mouse>. Render props give the consumer complete control over what's rendered with the shared data.
Render props have been largely superseded by custom hooks, which achieve the same logic sharing without the nesting. However, render props still have a niche: when you need conditional rendering at the JSX level (e.g., Formik's <Field> component) or when the shared logic involves lifecycle-like behavior that's tightly coupled to the render tree. Performance tip: if the render prop function is defined inline, it creates a new function every render, which can defeat memoization of the child. Extract it to a variable or use useCallback.
Render props are functions passed as props that return JSX, allowing components to share logic while letting consumers control rendering. The pattern has been mostly replaced by custom hooks, but still has value in libraries like Formik and Downshift where JSX-level composition is needed. I prefer hooks for new code since they avoid the nesting problem.
Nesting multiple render prop components creates 'callback hell' in JSX. This was the primary motivation for hooks — they flatten the same logic sharing into sequential hook calls.