High Order Components
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Example :
if we wanted to easily change the styles of a text by making the font larger and the font weight bolder, we could create two Higher-Order Components:
withLargeFontSize, which appends thefont-size: "90px"field to thestyleattribute.withBoldFontWeight, which appends thefont-weight: "bold"field to thestyleattribute.
const EnhancedComponent = WithStyles(WrappedAnyComponent) Implementation
We can apply logic to another component by:
- Receiving another component as its
props - Applying additional logic to the passed component
- Returning the same or a new component with additional logic
To implement the above example, we can create a withStyles HOC that adds a color and font-size prop to the component's style.
Usage of HOC
TradeOffs
DRY: Using the Higher-Order Component pattern allows us to keep logic that we want to re-use all in one place. This reduces the risk of accidentally spreading bugs throughout the application by duplicating code over and over, potentially introducing new bugs each time
Naming Collision: It can easily happen that the HOC overrides a prop of a component. Make sure that the HOC can handle accidental name collision, by either renaming the prop or merging the props.
Readability: When using multiple composed HOCs that all pass props to the element that’s wrapped within them, it can be difficult to figure out which HOC is responsible for which prop. This can hinder debugging and scaling an application easily.
If we have a lot of components that fetch data, we might want to show a certain loader while they’re still loading data.
In that case, we might want to create a withLoader HOC, which returns a component that fetches data, and returns a LoadingSpinner component while it's fetching data.
For further reading explore the link for the HOC Pattern.
