React Anti-Pattern: Prop-Drilling

Sometimes it takes learning what not to do to learn what to do.

This article is also available in a video format.

The examples from this article are available for download.

The Anti-Pattern

In this example, we have an application with two features:

• Three buttons, A, B, and C, change out a content area, e.g., Apple, Banana, and Cantaloupe (the navigation feature)
• A Swap Colors button swaps the background and foreground colors of the content areas (the color management feature)

The components are organized as follows:

• PropDrillingBad: Stateful container component providing the color management feature
• PropDrillingBadMenu: Stateful container component providing the navigation feature. In addition, it passes through the color management feature to some of its child components
• A number of stateless presentational components: PropDrillingBadMenuItem, PropDrillingBadMenuA (B and C), and PropDrillingBadSwapColors

In this example, we would describe the PropDrillingBad component as addressing a cross-cutting concern (the color management feature) for four components: PropDrillingBadMenuA (B and C) and PropDrillingBadSwapColors.

The problem, however, with this implementation is that PropDrillingBadMenu is overly complex as it prop-drillings (simply passing through) the color management feature properties to some of its children.

A Better Way

A better solution is to use a high-order component to cross-cut the color management feature to the four presentational components.

• withColors: Higher-order component providing the color management feature
• PropDrillingGood: Stateful container component providing the navigation feature.
• A number of stateless presentational components: PropDrillingGoodItem, PropDrillingGoodAView (B and C), and PropDrillingSwapColorsView
• The withColors wrapped versions of four presentational components; PropDrillingGoodA (B and C) and PropDrillingSwapColors

With this implementation, we simplify the PropDrillingGood component; now its sole concern is providing the navigation feature.

Observations:

• Often people will combine the stateless presentational and the wrapped version component in a single file. I, however, prefer to limit myself to single component per file (however trivial the file is, e.g., in this case the wrapped version component files are three lines long)
• In this case, the withColors higher-order component was more complicated than I originally expected
• In practice, I would instead use Redux with the React-Redux connect higher-order component to accomplish the same results for this particular example

Next Steps

If you found this article helpful, I would encourage you to follow me as I am actively writing more like it.