Higher-order components (HOCs) are an advanced topic in React.js, often used by application development experts to streamline the code and make the development project more efficient. A HOC is a “function that takes a component and returns a new component”. It reuses component logic and follows one of the patterns.
When do you use HOCs?
Let’s say you have a box to which you want to add an outline color. A component would perform this activity. Now let’s say you have ten similar boxes, each needing an outline color. You could hand-write code for each box, or use a HOC to create a function that provides an outline color for each.