React DevTools: What is new in V4 blog post

React DevTools: What is new in V4

Almero Steyn

27 Sep, 2019

React

3 minutes read

The React Developer Tools has been the go to place in the browser to inspect and debug React applications. The good news is that recently it got even better!

With the release of Devtools v4, the inspection powers we as developers have at our fingertips have increased in leaps and bounds. Let’s have a quick look at some of the highlight in the new and shiny Devtools!

We already notice the the first change when we open the browser’s development console. Where previously we could find the Devtools under the React tab, there are now two brand new tabs instead: Components and Profiler.

Browser development console tabs of new Components and Profiler tabs, each with React logo for identification

Under Components we find everything we need to inspect our component tree and under Profiler resides tools to check and inspect the performance of our applications.

Great news is that a lot of work has gone into speeding up the performance of the Devtools so it will perform well even in large applications.

The Components tab

Fellow Hooks enthusiasts will rejoice that the support for Hooks has seen a major improvement. Hooks now enjoy the same level of support as props and state.

The hooks block in the new Devtools, displaying state and other hooks. A complex state object has been opened to show the values inside.

The ability to inspect our Hooks adds a much needed layer to the debugging of our newest React applications.

A lot of work has gone into making it even easier to find the components we are debugging, which components they are related to, the elements they render in the browser’s DOM and their source code in the source map.

For example, it is possible to zoom in on a component to see its owner’s tree showing the child components rendered by it.

Owner's tree of a selected component in Devtools

Or alternatively, we can see the list of owner components that rendered our component!

Rendered by list in Devtools showing the owner components of the selected component

The Profiler tab

The Profiler tab is all about our app’s performance. It shows us how long components take to render so that we can find bottlenecks in our applications.

An important update to the new Devtools is the ability to capture the first render cycle of components when the application bootstraps.

When we record a profiling session we get a flame graph showing the render sequences and times of all the components in our application.

In the Devtools v4 we can even see a list of all the render times of our components and, if we turn the option on, the reason that any specific render was triggered!

 Render profile in the Devtools with flame graph, rendering times summary and render reason.

These are only a few highlights of the new features waiting inside the new React Devtools!

To get the lowdown on everything new head to the changelog for version 4 or you can try out all the new features for real in the Devtools demo environment!

And if you are wondering what the deal is with all the ice creams in the examples, come check out what it is all about in the new React course I am working on.

About the author

Almero is a freelance front-end engineer, speaker and trainer specialising in React. He wrote the accessibility section in the React docs and loves to build websites all humans can use. Having most recently fallen in love with Gatsby, this ingredient can be found in many of his most recent projects. When not coding Almero reads, cycles or explores historical sites in Europe.

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we'd love it if you'd spare a moment to share them!

Explore our React courses

Get started today and join over 60,000 developers.