Higher-Order Components (HOCs) Explained
Wrap components to inject props, guard routes, or add logging via HOC factories.
Welcome
In this lesson you will understand higher-order components (HOCs), how to write them, common use cases, and their trade-offs compared to hooks.
What Is a HOC?
A Higher-Order Component is a function that takes a component as input and returns a new, enhanced component. The HOC adds behaviour (like props, auth checks, or logging) without modifying the original component.
// HOC signature
function withEnhancement(WrappedComponent) {
return function Enhanced(props) {
// add behaviour here
return <WrappedComponent {...props} extraProp="value" />;
};
}All lessons in this course
- Render Props Pattern
- Higher-Order Components (HOCs) Explained
- HOC vs Render Props vs Custom Hooks
- Refactoring a HOC to a Custom Hook