render-props-pattern

The render props pattern in React shares stateful logic with components needing different rendering output by passing a function prop that returns JSX. Use it when multiple UI variations need shared state without lifting state or causing prop collisions.

Share stateful logic in React without higher-order components by passing a render function as a prop, typically named `render` or `children`. The component owns the data, invokes the function with that data, and renders the returned JSX, making prop origins explicit.

Render props avoid deep nesting and higher-order component naming collisions by making prop origins explicit through function props. React Hooks are often preferred for simpler state reuse, but render props suit cases where shared stateful logic must feed multiple flexible rendering variations.

Pass children as a function in JSX by providing a function as the `children` prop that receives component-owned data and returns JSX. The component invokes this function during render, enabling flexible stateless data flow and readable component composition.

Render props can cause deep nesting when chained extensively. Keep usage readable by passing a single function prop, invoking it with component-owned data, and returning the resulting JSX, avoiding heavy state lifting and multiple nested render-prop layers.