What are Higher-Order Components (HOCs) and render props?
Quick answer
Both are patterns for sharing logic. An HOC is a function that takes a component and returns an enhanced one; render props pass a function as children to share state.
In detail
Before hooks, these were the main ways to reuse stateful/cross-cutting logic. An HOC (withAuth(Component)) wraps a component to inject props or behaviour. A render-prop component calls children as a function with its internal state. Custom hooks have largely replaced both because they're simpler and avoid wrapper nesting, but you'll still meet HOCs in libraries (e.g. connect, memo itself).
// HOC
const withLoading = C => ({ loading, ...p }) =>
loading ? <Spinner /> : <C {...p} />;
// render prop
<Mouse>{pos => <Cursor at={pos} />}</Mouse>Why interviewers ask this: Tests awareness of patterns and why hooks superseded them.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399