Which statement best contrasts render props with higher-order components?

Which statement best contrasts render props with higher-order components?

• A. Render props pass a function as a child to share logic; HOC is a function that takes a component and returns a new component.
• B. HOC uses a function as child, while render props wraps a component to enhance it.
• C. Render props require class components only; HOC requires hooks.
• D. Render props and HOC are deprecated patterns.

Answer: (A)

Sharing logic in React can be achieved with two patterns: render props and higher-order components. Render props involve passing a function as a child, which receives data or helpers and returns what should be rendered, giving the component control over rendering with the shared logic. A higher-order component, on the other hand, is a function that takes a component and returns a new component with enhanced behavior by wrapping the original. This clear distinction—function-as-child for render props versus a function that wraps and returns a new component for HOC—is why that statement is the best description. The other options mix up how these patterns operate (for example, suggesting one uses a function-as-child while the other wraps a component in the opposite way) or claim requirements that aren’t accurate (both patterns can be used with functional components, and they aren’t deprecated).

Sharing logic in React can be achieved with two patterns: render props and higher-order components. Render props involve passing a function as a child, which receives data or helpers and returns what should be rendered, giving the component control over rendering with the shared logic. A higher-order component, on the other hand, is a function that takes a component and returns a new component with enhanced behavior by wrapping the original. This clear distinction—function-as-child for render props versus a function that wraps and returns a new component for HOC—is why that statement is the best description. The other options mix up how these patterns operate (for example, suggesting one uses a function-as-child while the other wraps a component in the opposite way) or claim requirements that aren’t accurate (both patterns can be used with functional components, and they aren’t deprecated).