3 Ways to Analyze React Performance with Reactime

Reactime is a state debugging tool for your React applications

Published in

The Startup

4 min readFeb 3, 2021

Save time developing using the Reactime dev tool

Reactime is an open-source product releasing its eighth iteration this week. Our team is excited to talk about its new features and how you can use Reactime to analyze React performance in your applications.

But first, what is Reactime?

Reactime is an open source product first released in August 2019. Since then, it has garnered more than 1,100 Github stars, was nominated for the 2020 React Open Source Awards, and is now compatible with Hooks, Context API, and Recoil React applications.

Reactime is a debugging tool that lets developers take snapshots of an application’s state data as well as time-travel through these snapshots. The snapshots display React render performance times, down to individual UI components. By using Reactime, developers can spot problematic components as well as unnecessary renders throughout their development stage.

Let’s talk about some key ways that developers could use Reactime!

1) State Snapshots & Time-Traveling Feature

Under the hood, Reactime captures state tree data from React’s own change-detection algorithm, Fiber. This data, which includes render times for each component on your target application, is displayed on the Reactime dashboard. The dashboard includes composite bar graphs to show render performance of each component by snapshot as well as an intuitive dendrogram to visualize the component tree.

On the bar graphs dashboard, each snapshot is immediately recorded in the form of a bar stack consisting of every React component, updated whenever state data changes. This gives developers insight into any performance render issues as well as unnecessary or redundant renders.

And of course, we can’t forget about what made Reactime such a popular dev tool in the first place: its time-travel debugging feature. By using this powerful feature, developers can move forwards or backwards through the application’s state in React apps. This change in state data is instantly reflected in the DOM of the target application. With Reactime, devs can analyze any state change in their application, at any point in time.

2) A/B Testing your App’s Performance Using “Save Series” Feature

With previous versions of Reactime, developers already had a window into their React app’s performance through state snapshots. However, they were limited to seeing the snapshots gathered only during that development session. Reactime 8.0 improves upon this by allowing developers to see and compare snapshots from any point in the development cycle.

With the Save Series feature, as devs work on their application they are now able to save a “series” of their state data snapshots, for example an interactive sequence in a set order of operations. At a later stage in the development cycle, the developer can run the same sequence, save it as a series, and make a side-by-side comparison with the previously saved series. With Save Series, developers are able to view long-term trends in their application’s component render times over the course of the development process and course correct if necessary.

Here’s what this exciting new feature looks like:

Save a series of state snapshots easily with the new Reactime v8.0 release

3) Proven Metrics to Further Analyze Your App

Reactime v8.0 also rolls out one of the most significant features since the product’s inception: Web Metrics. A major goal for any React developer is to optimize the quality of user experience as well as improve SEO. Our Web Metrics features help devs accomplish this goal by providing Google web metrics: LCP , FCP, FID, and TTFB. The addition of this small suite of performance metrics means that developers no longer need an additional extension or application to gather this data. It’s available instantly within its own tab.

Web Metrics returns the the following markers in both numerical and graphical form:

LCP — Largest Contentful Paint: the amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive. It will be a ranking factor in 2021.

FCP — First Contentful Paint: the amount of time it takes to render the first DOM element of any variety.

FID — First Input Delay: a measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.

TTFB — Time to First Byte: the amount of time it takes for a user’s browser to receive the first byte of page content from the server.

What’s Next for Reactime?

Reactime strives to improve with each iteration. It’s an open source product that has been receptive to constructive feedback from the React developer community. We’re dedicated to bringing a world-class dev tool to React developers everywhere.