Higher Order Components (HOC)
A higher order component (HOC) is an advanced way to re-using component logic and it is a function that takes a component and returns a new component that is known as Higher Order Components (HOC).
In other words, A Higher Order Component is just a React Component that wraps another one.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
What can you do with Higher Order Components ?
- Code reuse, logic and bootstrap abstraction
- Render High jacking
- State abstraction and manipulation
- Props manipulation
Why are HOCs Useful ?
1. Basically Higher Order Components provide wraps another component, it useful for following condtion
- Do things before and/or after it calls that component
- Avoid rendering the component if certain criteria is not met
- Update the props passed to that component, or add new props
- Transform the output of rendering a component (e.g. wrap with extra DOM elements, etc.)
2. Because HOCs can be applied to any component, functionality can be implemented once and re-used for every component that needs it.
These two attributes make HOCs a good tool for implementing cross-cutting concerns or common functionalities, such as logging and tracking.