Yesterday, the React team announced the release of React DevTools 4.0 for Chrome, Firefox, and Edge. In addition to better performance and navigation experience, this release fully supports React Hooks and provides a way to test the experimental Suspense API.
Key updates in React DevTools 4.0
Better performance by reducing the “bridge traffic”
The React DevTools extension is made up of two parts: frontend and backend. The frontend portion includes the components tree, the Profiler, and all the other things that are visible to you. On the other hand, the backend portion is the one that is invisible. This portion is in charge of notifying the frontend by sending messages through a “bridge”.
In previous versions of React DevTools, the traffic caused by this notification process was one of the biggest performance bottlenecks. Starting with React DevTools 4.0, the team has tried to reduce this bridge traffic by minimizing the amount of messages sent by the backend to render the Components tree. The frontend can request more information whenever required.
Automatically logs React component stack warnings
React DevTools 4.0 now provides an option to automatically append component stack information to the console in the development phase. This will enable developers to identify where exactly in the component tree failure has happened. To disable this feature just navigate to the General settings panel and uncheck the “Append component stacks to warnings and errors.”
Source: React
Components tree updates
- Improved hooks support: Hooks allow you to use state and other React features without writing a class. In React DevTools 4.0, hooks have the same level of support as props and state.
- Component filters: Navigating through large component trees can often be tiresome. Now, you can easily and quickly find the component you are looking for by applying the component filters.
- “Rendered by” list and an owners tree: React DevTools 4.0 now has a new “rendered by” list in the right-hand pane that will help you quickly step through the list of owners. There is also an owners tree, the inverse of the “rendered by” list, which lists all the things that have been rendered by a particular component.
- Suspense toggle: The experimental Suspense API allows you to “suspend” the rendering of a component until a condition is met. In <Suspense> components you can specify the loading states when components below it are waiting to be rendered. This DevTools release comes with a toggle to let you test these loading states.
Source: React
Profiler changes
- Import and export profiler data: The profiler data can now be exported and shared among other developers for better collaboration.
Source: React
- Reload and profile: React profiler collects performance information each time the application is rendered. This helps you identify and rectify any possible performance bottlenecks in your applications. In previous versions, DevTools only allowed profiling a “profiling-capable version of React.” So, there was no way to profile the initial mount of an application. This is now supported with a “reload and profile” action.
- Component renders list: The profiler in React DevTools 4.0 displays a list of each time a selected component was rendered during a profiling session. You can use this list to quickly jump between commits when analyzing a component’s performance.
You can check out the release notes of React DevTools 4.0 to know what other features have landed in this release.
Read Next
React 16.9 releases with an asynchronous testing utility, programmatic Profiler, and more
React Native 0.60 releases with accessibility improvements, AndroidX support, and more
React Native VS Xamarin: Which is the better cross-platform mobile development framework?
