Technology

The New Features in React DevTools 4

William Strong
Aug 28, 2019
29

On August 15 the React team announced a new version of React DevTools on the React blog. The release came with improvements to performance and several quality of life updates for both the Component Tree and the Profiler.

My favorite of the new changes are the way components are presented in the tree, filtered, and the ability to look at parents components with ease.

Component Tree Updates

Updates to the component tree include large updates like filters, and two new ways to view the relationships between components, and smaller changes like enhanced search and the ability to edit props.

Performance

For me the biggest enhancement is the increased performance. If you are working on a large React app and have found DevTools difficult to use, due to performance, it's definitely worth giving version 4 a try. Before I discovered the new DevTools during its prerelease phase, I found it difficult, and almost impossible, to use DevTools on large projects, but those issues have been resolved with version 4.

Filters

DevTools now includes an options to control what gets shown in the tree by filtering out components. Components can be hidden by location, name, type, and higher order component(hoc). hoc is the simplest of the options, when the filter is applied it simply hides all of the hocs in the tree. Location and name allows you to pass a regular expression. The last filter is especially useful it allows you to filter out components by their type: "host nodes" are HTML nodes, or components like <View> in React Native), class or function filters components based on how they are written, context, forwardRef, memo, profiler, and suspense all filter components that provide the corresponding functionality. The other option is a catch-all for components that do not fit the other type filters. These filters are super useful for large applications with complicated trees or several provider components. component filters

Rendered by List

Another useful navigation change is the rendered by list which shows the parent tree for the current component. I've been using this feature to help trace props through the tree and view the providers that a component is a child of.

rendered by list

Owners Tree

The owners tree shows the inverse of the rendered by list, it allows you to see a tree of the components that are rendered by any one component.

owners tree

Other Changes

DevTools now provides some extra tools for components. There is a button that will log a components data to the console and a toggle for components using suspense.

Resources

You can find more information on the official change log (which also includes all of the images in this post) or the announcement.

The new React DevTools is available as a Firefox extension , and a Chrome extension . You can check the announcement to see which versions of React are supported. If you are interested in how the team achieved performance enhancements there is an overview of the performance enhancements.