Mastering Higher-Order Components in React: Simplify State & Lifecycle

Higher-order components (HOCs) are a powerful technique for refactoring React code, allowing you to extract reusable logic for state and lifecycle methods.

What is a higher-order component? The term comes from higher‑order functions—functions that take another function as an argument and may return a new function. Common examples include Array.forEach, Array.map, and setTimeout.

An HOC receives a component as an argument and returns a new component that wraps the original one, meaning the argument must be a function.

Below is a typical HOC example:

Extract shared state

If two components need to load the same data, they will share the same componentDidMount logic.

1. Find duplicate code

Each component’s constructor and componentDidMount perform the same tasks, and both display the “Loading...” text while fetching data. These duplicated parts are good candidates for extraction into an HOC.

2. Migrate duplicate code to an HOC

In the BookLoader HOC, the book state is managed and passed to the wrapped component as a prop. The same approach handles the Loading state, fetching data and updating the component.

3. Wrap components and replace state with props

Apply the BookLoader HOC to BookDetails and BookSummary components:

4. Simplify further

After migrating to an HOC, you can further simplify the components; in this example the components become plain functional components.