Inspecting Components with React Devtools

Refactoring components into HOCs has the advantage of keeping code in manageable units, but as those units grow in number, it’s easy to lose track of how they all fit together. One way to regain perspective is to take a look at the components in action through the React Developer Tools.^[70]

Install the React Devtools in your browser of choice. Open the Carousel test page, then navigate to the React panel that the extension added to the developer console. You’ll get a nice view of the entire tree of React components on the page, along with their props as shown in the screenshot.

You can quickly locate any component you’re interested in using the search bar. Click a component in the tree, and the selected component’s props and state will appear on the right side. You can even edit (primitive) props and state values in real time and see what effects those changes have.

This bird’s-eye view is invaluable for debugging. Start with the component that’s rendering the unexpected output: most likely, the problem is caused by a problematic prop value. Work your way up the tree to see which component is passing that prop in. Then you can write up a unit test against that component to describe the problem, and quickly get it fixed.