What is a render prop in React?
A pattern where a component takes a function as a prop and calls it to render, passing shared state. It was a pre-hooks alternative to HOCs, but it caused deep callback nesting and inversion of control.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in HOCs vs Custom Hooks vs Render Props: Patterns Compared
HOCs wrap a component and return a new one. Render props pass a function as a prop that renders with shared state. Custom hooks are functions starting with 'use' that encapsulate stateful logic and are called directly. All three reuse logic.
Because they solve the same problem without the downsides. There is no wrapper nesting, no prop collisions, and logic composes naturally by calling multiple hooks. They are cleaner and easier to read and test.
Not for new code. Use custom hooks, which are the modern standard. Understand HOCs and render props to read older codebases and some libraries, but write custom hooks for new logic reuse.
Still have questions?
Browse all our FAQs or reach out to our support team