React Icon Get 73% off the React Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
React

React DevTools: What is new in V4

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.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

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.

Related blogs 🚀

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.