What are Higher-Order Components (HoCs) in React?
5 min readApr 2, 2022
Short Answer: Component Factories.
Longer answer?
Higher-Order Components are actually a design pattern derived from the compositional nature of React, which allows us to derive components based on particular data we want to pass down to them.
Think of it this way:
- Components return React Elements (JSX)
- Higher-Order Components return Components
Don’t get confused — an HoC itself is not a component.
Remember: Components are functions that return a React element (JSX Element); higher-order components are the functions that return those components.
At a higher level of abstraction, an HoC would look something like this:
