What is the render props pattern?

What is the render props pattern?

• A. Render props pattern uses portals to render content.
• B. Render props pattern requires a higher-order component to wrap another component.
• C. Render props pattern involves passing a function as a child to a component and using its return value to render.
• D. Render props pattern is deprecated.

Answer: (C)

The render props pattern is a technique for sharing logic between components by giving a component a function that it calls to determine what to render. This function is passed in as a prop (often as the component’s children) and is invoked with data about the component’s state or behavior. The function then returns the UI, so the consumer controls exactly what gets rendered while the component provides the data and behavior. This approach makes it easy to reuse logic like state management or event handling, because the rendering is delegated to the consumer-provided function. For example, a component might manage some state (like a value or a window size) and call the render function with that state to render the UI accordingly. It’s different from portals, which render content into a different part of the DOM, and from higher-order components, which wrap a component to inject props rather than delegating rendering to a function. And it isn’t deprecated; it remains a valid pattern (even as hooks introduced new ways to share logic).

The render props pattern is a technique for sharing logic between components by giving a component a function that it calls to determine what to render. This function is passed in as a prop (often as the component’s children) and is invoked with data about the component’s state or behavior. The function then returns the UI, so the consumer controls exactly what gets rendered while the component provides the data and behavior.

This approach makes it easy to reuse logic like state management or event handling, because the rendering is delegated to the consumer-provided function. For example, a component might manage some state (like a value or a window size) and call the render function with that state to render the UI accordingly.

It’s different from portals, which render content into a different part of the DOM, and from higher-order components, which wrap a component to inject props rather than delegating rendering to a function. And it isn’t deprecated; it remains a valid pattern (even as hooks introduced new ways to share logic).