render-props-pattern

To share rendering logic between React components without tight coupling, pass a function that returns JSX as a prop. This delegates rendering to child components while keeping data-fetching or behavioral logic centralized.

A render prop in React is a function prop that returns JSX, enabling flexible component composition. The parent component invokes this function to delegate what gets rendered, allowing child components to control the UI output.

Use render props in React when different parts of the UI require the same data or behavior but need to render different JSX. It is ideal for scenarios like rendering different headers for list items using the same data-fetching logic.

Yes, you can use children as a function to achieve flexible rendering in React. This common render prop variant accepts a function as the children prop, enabling flexible delegation of rendering while keeping code maintainable.

To create a React component that accepts a render prop, define a component that takes a function prop and uses it to return JSX. This allows the component to pass data to the function, which then handles the UI rendering.

The main limitation of render props for code reuse in React is potential prop drilling and callback hell. While it enables flexible composition, deeply nested render props can make the code harder to read and maintain.