javascript / intermediate
Snippet
Enhancing Components with Higher-Order Components (HOC)
A Higher-Order Component is a pattern where a function takes a component and returns a new component with additional functionality, such as logging, permissions, or data fetching.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
function withLogger(WrappedComponent) {return function(props) {console.log('Rendering:', WrappedComponent.name);return <WrappedComponent {...props} />;};}const EnhancedButton = withLogger(({ label }) => (<button>{label}</button>));
react
Breakdown
1
function withLogger(WrappedComponent) {
Defines a function that accepts a component as an argument.
2
return function(props) {
Returns a new functional component that wraps the original one.
3
return <WrappedComponent {...props} />;
Passes all original props through to the wrapped component.