render-props-pattern

Use a render prop to share rendering logic by passing a function that returns JSX. This allows a parent component to define how data is rendered while children decide what to render, improving reusability and avoiding rigid hierarchies.

The children-as-a-function pattern is a render prop variation where children are a function receiving shared data. Use it for reusable UI wrappers, conditional rendering, and dynamic layouts requiring different render variations of shared data.

Render props reduce nesting compared to higher-order components and offer flexible composition. However, this pattern guides toward React hooks as modern alternatives for sharing data and rendering logic, favoring hooks for new implementations.

Create a component that accepts a render prop or children as a function, then render the output by invoking that prop with the necessary data. This enforces best practices for render-prop usage while maintaining flexible composition.

Avoid render props when modern React hooks can achieve the same logic sharing with less nesting. This pattern enforces best practices but explicitly guides toward hooks as the preferred modern alternative for reusable component logic.

Yes, render props support conditional rendering and dynamic layouts by passing a function that returns JSX. This allows components to share rendering logic while enabling flexible variations for shared data like titles, lists, or layout wrappers.