Reactime just keeps getting better

Nick Huemmer
4 min readJun 21


Reactime 20.0, the best ever!

Co-authored by Sergei Liubchenko, James McCollough and Mike Bednarz

Reactime is an open-source tool for debugging and time travel in React applications while in development. It is a Chrome Extension that allows developers to monitor, record, and conceptualize changes in their application via state snapshots. It provides detailed application performance monitoring by supplying metrics such as component render time and render frequency.

Why use Reactime?

Reactime simplifies development by allowing developers to see state changes in real time, time travel through different snapshots of state, and view performance metrics of their application. It is a handy, comprehensive tool for developers using React.

Switch between the map, performance and history tabs.
Time travel through the app with state changes on the timeline.
Use the history map and action menu to jump through state changes.

What’s new in Reactime 20?

In this release, we have improved the following features:

  • Continued converting JavaScript to TypeScript throughout the codebase, making the code more robust and easier to maintain.
  • Added more testing with React Testing Library and Jest, which will help catch bugs before they reach production.
  • Made existing tests more robust and fixed broken testing environments to ensure that Reactime is working as expected.
  • Improved Accessibility, making Reactime compliant with Web Content Accessibility Guidelines (WCAG).
  • Removed deprecated dependencies that caused compilation errors and updated the corresponding functionality in Reactime.
  • Resolved a bug that caused apps to throw errors when using Reactime while executing login functionality.
  • Made the app more performant by removing unnecessary code and optimizing the existing code.

Resolved Bugs

Upon first opening Reactime, the Reactime 20 team encountered several major errors. We found that Reactime would not compile properly, which was ultimately related to some deprecated packages. We also discovered that using an application’s login functionality while using Reactime in the background would trigger an error, crashing the entire application. We resolved these bugs by removing deprecated code and transforming the snapshot data on the backend of Reactime.

Increased TypeScript Coverage

We have significantly increased conversion of Reactime’s JavaScript files to TypeScript. Our team worked extremely hard to make this happen. Implementing TypeScript has become standard practice in the industry, and maximizing TypeScript usage in Reactime brings some important benefits to the codebase: static typing, fewer bugs at runtime, and improved maintainability and readability, all of which makes Reactime a more robust codebase for future iterators.

Expanded Testing

Reactime now has 83% testing coverage, which helps ensure that the app performs as expected. Reaching this optimal level of testing in Reactime will ensure the app’s stability for future React developers and prevent new bugs from developing as the codebase grows, maintain code quality, and speed future development. In addition to new testing, we have also improved existing tests and fixed some broken test environments.

Improved Accessibility

Color contrast has been improved and minimum font size increased.

Reactime is now more accessible than ever! We have updated many aspects of Reactime’s UI/UX. All fonts are now at least 12pt, which is a significant increase in size for much of the text in Reactime. All text and backgrounds have been updated to ensure the contrast ratio between the text and background is at least 4.5:1, consistent with WCAG. All color schemes have been altered to make the elements more visible to users with color blindness. As a result of these changes, Reactime is much more usable and visible for developers.

Meet the Reactime 20.0 Team!

Mike Bednarz | GitHub | LinkedIn

Sergei Liubchenko | GitHub | LinkedIn

James McCollough | GitHub | LinkedIn

Nick Huemmer | GitHub | LinkedIn

Download Reactime 20.0 on the Chrome Web Store!

Visit our website and star us on GitHub!