render-props-pattern

Pass a function as a `render` prop (or as `children`) that receives data and returns JSX. The component calls this function with its internal state, for example `props.render(value)`, letting the caller control what gets rendered.

Custom hooks are preferred in most modern React code because they provide the same logic reuse without nested JSX. Use render props mainly for headless components where the caller must control rendering, or when a hook cannot express the API.

Render props pass data explicitly through function arguments, avoiding the naming collisions and implicit prop merging of HOCs. You can see exactly where each prop comes from in the render function's argument list.

Yes, the `children` prop can be a function, which is technically a render prop. The component invokes `props.children(data)` with its state, and the caller writes `<Input>{(value) => ...}</Input>` to receive that data.

Avoid it when a custom hook achieves the same reuse with less ceremony, when it creates deeply nested JSX that hurts readability, or when the shared logic is simple enough for a plain utility function. Render props also cannot use lifecycle methods.