Higher-Order Components (HOCs) in React
From the React Components & JSX cheat sheet · Component Patterns & Types · verified Jul 2026
Higher-Order Components (HOCs)
Functions that take a component and return an enhanced component
jsx
function withLogger(Component) {
return function Wrapped(props) {
console.log('Rendering', Component.name, props);
return <Component {...props} />;
};
}
const LoggedButton = withLogger(Button);💡 HOCs are functions that wrap a component to add behavior — common in legacy code
⚡ Modern React prefers custom hooks over HOCs for sharing logic
📌 Always spread {...props} to forward unrelated props to the wrapped component
🟢 HOCs are still useful for cross-cutting concerns like auth guards and analytics
hocpatterncomposition