We discussed higher-order components in Chapter 5, Routing with React, with the discussion of withRouter from React Router; now, we will build one, but first, let's take a quick refresher.
Higher-order components are a fantastically useful pattern in React. If you learn to use them well, you'll open up a whole bunch of possibilities to keep a large code base maintainable and reusable, but they’re not as intuitive as regular components, so let's ensure that we cover them well.
At a most basic level, a higher-order component is a function that returns a component.
Imagine that we have a button component:
function Button(props) {
return <button color={props.color}>Hello</button>
}
This can also be written using class syntax, if you're more familiar with that:
class Button extends Component {
render() {
return <button...
