Can you pass a React component as a prop? Explain Render Props.

What's really being asked

This question tests whether you understand React's core model of components as first-class JavaScript values, not just template syntax. It separates engineers who memorize JSX patterns from those who understand the underlying composition model. Specifically, it probes your knowledge of inversion of control, dynamic composition, and the distinction between component references and render functions.

The full answer

First, confirm that yes, you can pass any valid JavaScript value as a prop, including functions, JSX elements, and component references. Second, distinguish between passing a component reference like Header={MyHeader} and passing a render function like renderItem={(item) => <Row>{item}</Row>}. Third, explain the practical benefit: the parent controls what renders while the child controls when and where it renders, which is inversion of control. Fourth, contrast this with the children prop, noting that render props are explicit and named, making them better for multiple insertion points or when the child needs to inject data. Fifth, give a concrete use case.

The mistakes people make

Claiming that props only accept strings, numbers, or simple objects. Confusing render props with Higher-Order Components by saying it is just another way to write an HOC without clarifying that HOCs wrap components at definition time while render props compose at runtime. Another red flag is suggesting useContext or global state as the modern replacement without acknowledging that render props still solve specific localized composition problems that hooks do not fully replace. Overcomplicating the explanation with class component syntax without being able to explain the concept in function components.

What usually comes next

How does this differ from passing JSX as children? When would you choose a render prop over a custom hook? Can you pass a component reference versus a function that returns JSX, and what are the typing differences in TypeScript? How do you avoid unnecessary re-renders when passing render functions inline? Have you used this pattern in a design system or library?

A concrete example

Imagine a DataTable component that fetches rows but does not know how each row should look. It accepts a renderRow prop. The parent passes renderRow={(row) => <CustomCell data={row} />} and the DataTable internally maps over rows calling that function with each row object. This keeps the table logic reusable while letting every consumer define its own columns and cell behavior without forking the component.