Render props and higher-order components (HOCs) are both React patterns used for code reuse. Render props use a function passed as a prop to control what to render, while HOCs wrap components to inject additional logic or data.
What are render props and how do they differ from HOCs?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
In React, both Render Props and Higher-Order Components (HOCs) aim to share logic between components. However, they differ in implementation: HOCs wrap components and return enhanced ones, whereas Render Props use a function as a prop to dynamically render UI with shared functionality.
Render Props Pattern
Render props is a pattern where a component receives a function as a prop and uses it to determine what to render. This function receives shared data or behavior as arguments, enabling reusable and flexible composition.
JSX
// Example of Render Props
function DataProvider({ render }) {
const [data, setData] = useState('Hello Render Props!');
return render(data);
}
function App() {
return (
<DataProvider render={(data) => <h1>{data}</h1>} />
);
}
Higher-Order Components (HOCs)
HOCs are functions that take a component as input and return an enhanced version of it. They are often used to inject props or logic into wrapped components, such as authentication, logging, or global data handling.
JSX
// Example of HOC
function withLogger(WrappedComponent) {
return function EnhancedComponent(props) {
console.log('Rendering', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const Hello = (props) => <h2>Hello, {props.name}</h2>;
const HelloWithLogger = withLogger(Hello);
Pattern | Implementation | Rendering Control | Common Use Cases |
|---|---|---|---|
Render Props | Passes a function prop to control rendering. | Parent component controls rendering output. | Reusable behavior without inheritance or wrapping. |
HOC | Wraps a component and returns an enhanced version. | Wrapped component renders normally. | Injecting data or functionality (e.g., Redux connect). |
When to Use Each
- Render Props: When you want full control over rendering and flexible composition.
- HOCs: When you want to extend or modify components’ behavior in a reusable, declarative way.
Best Practices
- Avoid using both patterns simultaneously in the same component — it increases complexity.
- Prefer hooks in modern React for sharing logic (e.g.,
useCustomHook()). - Render props are more explicit and composable, whereas HOCs abstract logic more deeply.
Think of render props as 'passing a render recipe' and HOCs as 'wrapping an object with a new layer of behavior.' Both achieve reusability, but through different philosophies.
Summary
- Render Props share logic through function props.
- HOCs wrap and enhance components.
- Modern React often replaces both patterns with custom hooks for cleaner and simpler reusability.
Similar questions
Guides