Loading lesson path
â® Previous Next â¯
A Higher Order Component (HOC) is like a wrapper that adds extra features to your React components. Think of it like putting a case on your phone - the case adds new features (like water protection) without changing the phone itself.
HOCs are functions that take a component and return an enhanced version of that component.Formula
To demonstrate how HOCs work, let's create a simple example - adding a border to any component:Create a function that adds a border around whatever component you pass to it:
// This is our HOC - it adds a border to any component function withBorder(WrappedComponent) {
return function NewComponent(props) {
return (
<div style=>
<WrappedComponent {...props} /></div>
);
};
}// Simple component without border function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}// Create a new component with border const GreetingWithBorder = withBorder(Greeting);function App() {
return (<div> <Greeting name="John" /> <GreetingWithBorder name="Jane" /> </div>
);
}Formula
withBorder is our HOC - it's a function that takes a componentIt returns a new component that wraps the original in a div with a border The original component (
) remains unchanged We can still use both the original and enhanced versions
Often, HOC's can be replaced with React Hooks, but HOC's are still useful for certain cross-cutting concerns like authentication or data fetching patterns. â® Previous Next â¯