Version 4 of the React Developer Tools has been publicly available since Friday. The extension is available for Chrome, Firefox and Edge. We took a look at the update and tell you what the new version of the debugging tool can do.
The update to the browser extension for developing with React comes with full support for React hooks. In addition, performance and navigation have been significantly improved and revised. The previous version took up a lot of memory and performance and was therefore only partially suitable for larger React apps. With version 4 this disadvantage has been successfully remedied. If you already have the extension, it should update itself automatically. All others can find the extension in the Chrome web store or under the Mozilla add-ons.
From now on you can set that so-called “Component Stack Traces” are appended to warnings (console.warn) and error messages (console.error). So you are not only warned that something is going wrong in your component, but you can also see exactly where in the component tree the fail occurred. The view of the component structure has been thoroughly revised and offers significantly more filter options.
You can now apply filters and hide elements, for example all elements with the attribute “name = item” in a list. Host nodes are hidden in version 4 of the React Dev Tools by default – but if you want, you can deactivate this filter. Your filter settings are saved from session to session. The new version no longer shows you inline props of components within a component tree, which means that large component trees in particular are clearer. By clicking on a component you can still view its props, states and hooks.
Rendered-by List and Owners Tree
In version 4 you will find a “Rendered by” list in the right sidebar. This way you can see more quickly where the props of an element come from – an “Unexpected Prop Value” can be debugged much faster. The counterpart to this is the Owners Tree, which shows you the entire list of elements that are rendered by a higher-order component. With the help of the owner tree you can get to the bottom of the render method of an element, which can be super useful if you have to debug foreign or very large React apps.
No more horizontal scrolling
If you wanted to look at nested components in the previous version, you often had to scroll both horizontally and vertically for deeply nested components. In the new version, the indentation is automatically adjusted to the width of the screen when scrolling, i.e. no more horizontal scrolling. Selected elements are still selected in the new version after a reload.
Hooks are supported
Version 4 offers the same support for your hooks as for props and state. You can expand arrays and objects and edit values.
In the old developer tools, the hits were displayed on a level without indentation, the hierarchical structure was not recognizable. In the new, which is similar to the “Search on this page” function of your browser, hierarchical relationships between your elements are visible in the results view.
Components that have been rendered by Higher Order Components (HOC) initially look like everyone else. When naming, you are therefore well advised to follow the following convention: withHOC (wrappedComponent). The reason: This is the only way you have a chance to recognize them as such when debugging. The new Components Tree makes this a little easier for you. It formats such HOC names (and some React-specific functionalities such as React.memo and React.forwardRef) into a badge that is attached to the relevant components. So you can see it at a glance.
If you wrap multiple components in a suspense component, make them wait for each other before they are rendered. At the moment there is only one use case for the experimental API: dynamic rendering of components with React.lazy. Other use cases are planned, such as data retrieval. From now on you can test whether this works as desired by clicking on the icon.
Better profiler function
The initial mount of an app is a very performance-intensive part. In the previous version of the React Dev Tools you could use the Profiler, but unfortunately only after the initial mount. Since the update, you can also analyze the performance of your app during this time. You can then export the data and share it with other developers. With “Why did this render” you can see changes of props and states between the renderings. In addition, the Profiler shows you in a list how often a component was rendered during a profiling session and how long it took for it. If you want to analyze the performance of a certain component, you can use this functionality to jump back and forth between commits.
t3n says: We think: a really successful update that leaves almost nothing to be desired. At least we can’t think of any at the moment. Whereby – maybe a tiny thing: In the Profiler of the new version, re-renderings are no longer highlighted in color. But that doesn’t really matter.
The biggest flaw – the lack of support for hooks – and a lot of annoying little things, like the story with horizontal scrolling, have been fixed. If you want to try the whole thing first with no obligation: There is an interactive tutorial that will probably make you a fanboy – or fangirl. Kathrin Stoll
You might also be interested in: