React Developer Tooling

React Developer Tooling

During React Conf in Las Vegas this year Brian Vaughn, a member of the React JS-core team at Facebook, announced some of the new features and additions to React developer toolset. In this blog post, I will highlight the notable updates to React DevTools and explain how you can leverage its features today together with Fast Refresh to develop more robust Web and mobile applications.

Fast Refresh

Fast Refresh allows you to get instant feedback for changes in your React codebase. It was released together with React Native 0.61 and React DOM support is coming soon (you can track progress in the following GitHub issue).

How Fast Refresh is different from hot reloading?

  • First-class feature
  • Built for all renderers (React Native, React DOM, etc.)
  • Supports function components and hooks (component state is saved between reloads)
  • Recovers after syntax or runtime errors

How does Fast Refresh work with Hooks (at a very high level)?

When the code changes, Fast Refresh (FR for short) has to decide whether it should update or re-mount the component. To help make this decision, FR computes a component signature. This signature is a string that describes which hooks the component uses.

So for example, the code which uses `useState` and `useMemo` hooks:

function Example () {
 const [count, setCount] = useState(0);
 const val = useMemo(() => …, [count]);
}

might have a signature string which looks like this:

// signature: “useState{count} useMemo{val}”

Each time a component’s code changes, FR recomputes this signature. If the signature is the same, then it’s safe to update the component, but if the signature has changed, FR knows that it needs to re-mount and reset the component’s state.

DevTools v.4

Updated React DevTools library is available as an extension for Firefox and Chrome. If the plugin is already installed, it should update automatically. If you use shell, you can install the new version from NPM by typing `npm install -g react-devtools@^4`.

Tracing the flow of props

Updated React DevTools now show a `rendered by` list on the right-hand pane. This list shows which components rendered the selected component and what rendered that component all the way up to the root of the application.

`Rendered-by` section in DevTools

Component filters for large trees

It can be hard to explore big applications with a lot of components. To help with this, DevTools provide a way to filter the components so you can hide the ones you’re not interested in seeing, like Host components. Components can be filtered by element type, display name, and source location.

Component filters

Inspecting components in the console

If you ever needed to go to the lower level in the devtools interface you can log an element to the browser’s built-in console by clicking on the bug icon. There you can inspect its props and state, see the location of the component’s source code and directly interact with the native elements it renders.

Inspecting component in the console

New profiler

Profiler is a really helpful tool for optimizing React components. The old dev tools supported profiling but only after it connected with the renderer. Because of this, there was no way to profile the initial mount which is one of the most performance-sensitive parts within the app. Devtools now has a Reload profile button, similar to the browser’s built-in profiler. This button will automatically reload the connected React application and record profiling data for the app start-up. Profiling data can also be exported and shared with other developers to enable better collaboration and debugging.

When profiling an app you might find yourself wondering why did this component render. The profiling now helps answer this question by recording which props and state changed between renders. This feature is turned off by default because it adds a small amount of overhead to the profiler but you can turn it on in preferences.

Profiler with `why did this render` support

Conclusion 

This was a short overview of some additions and improvements that are available to all React developers today. If you want to learn more about the new features, please visit the following webpage: https://react-devtools-tutorial.now.sh/.

Be sure to drop a comment, if you have any questions or comments :)

Happy coding!

Leave a Reply

Close Menu