Chapter 5
Refactoring with Higher-Order Components

The power of React is that it allows you to express web apps in individual units called components. But the rules for assigning different bits of functionality to different components aren’t always clear. In principle, any React app could be expressed as a single monolithic component. Or at the opposite extreme, every DOM element in the page could be managed by its own micro-component.

A good rule of thumb is that components should be built in such a way that each component has only one job. Components with multiple responsibilities are a good candidate for being split up. These distinctions are intuitive, not technical—no automated process is going to tell you whether a component has multiple responsibilities. Still, thinking in these terms will help you as you work to keep code manageable. The more complex an individual component is, the harder it’ll be to make changes to it.

This chapter is about splitting up complex components into simpler pieces using a pattern called higher-order components (HOCs). You’ll add new functionality to the carousel component from the previous chapter while actually simplifying the core component by extracting some of its logic to an HOC. And you’ll learn how to use the React Devtools to see how different components are interacting in your browser.