In a render props pattern, a Mouse component that calls props.render with { x, y } demonstrates what concept?

In a render props pattern, a Mouse component that calls props.render with { x, y } demonstrates what concept?

• A. Sharing static layout via props.
• B. Using a higher-order component to inject props.
• C. Passing a render function as a prop to determine UI.
• D. Wrapping the render output in a separate component.

Answer: (C)

Render props pattern uses a function provided as a prop to decide what UI to render. In this example, the Mouse component doesn’t render its own UI directly; it calls a function provided via a prop (props.render) and passes the current coordinates { x, y }. The parent supplies that function, and whatever UI it returns based on those coordinates becomes the rendered output. This approach keeps the behavior (tracking mouse position) separate from presentation, letting different callers render different visuals from the same data. This isn’t about sharing static layout via props, since the UI is produced by the render function at render time. It isn’t a higher-order component, which would wrap another component to inject props. And it isn’t simply wrapping render output in another component; it’s about delegating the rendering decision to a function that receives the data.

Render props pattern uses a function provided as a prop to decide what UI to render. In this example, the Mouse component doesn’t render its own UI directly; it calls a function provided via a prop (props.render) and passes the current coordinates { x, y }. The parent supplies that function, and whatever UI it returns based on those coordinates becomes the rendered output. This approach keeps the behavior (tracking mouse position) separate from presentation, letting different callers render different visuals from the same data.

This isn’t about sharing static layout via props, since the UI is produced by the render function at render time. It isn’t a higher-order component, which would wrap another component to inject props. And it isn’t simply wrapping render output in another component; it’s about delegating the rendering decision to a function that receives the data.