The New Features in React DevTools 4
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.
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.
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
<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.
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.
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.
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.
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.