Test-Driven React

Stacking Higher-Order Components

In React, a set of props can flow from one wrapper component to another to another, down a practically limitless chain, receiving modifications from each component. This creates infinite possibilities for combining HOCs. Extracting small pieces of functionality into HOCs, instead of allowing components to grow in complexity, is an important skill for keeping a React codebase manageable.

In this section, you’ll add a new feature to Carousel: the ability to auto-advance the slideIndex on Carousel with a timer. All of the timer logic will be encapsulated in a new HOC.

Working with Timers

Let’s create a new HOC called AutoAdvances. It’ll be designed to work inside of a HasIndex, calling the increment function it receives ...