Render Props
A component hands data to your function, and your function returns the UI, letting you reuse behavior without locking in the markup.
See it
What it is
A render prop is a function a component calls to ask the caller what UI to return. The component owns behavior or data, then passes the result into a prop such as renderItem, or into children as a function. React Router v4 popularized it with Route's render prop, and Downshift used it to supply combobox state and prop getters while leaving every element and class name to the caller.
Reach for it when reusable behavior must wrap UI whose exact markup cannot be predicted. It is especially useful for list items, cells, loading boundaries, and headless widgets where a plain children slot cannot expose the values the caller needs.
Gotcha: the function runs during render, so it must stay pure. Deeply nested render props create a callback pyramid, and an inline function is a new prop on every render. Hooks now cover many behavior-sharing cases with less nesting, but a render prop is still the direct choice when the reusable unit must control where the returned UI appears.
Ask AI for it
Build a reusable DataList component with a renderItem prop typed as (item: Item) => React.ReactNode. DataList must own the list iteration, empty state, and stable item keys while the caller owns each item's markup. Call renderItem during render without side effects, and show two usages of the same DataList: one returning article cards and one returning compact table rows. Keep the render callback API explicit instead of cloning elements with React.cloneElement.