What time is it? Reactime!
Reactime, your favorite React debugging tool, is rolling out Reactime X this week. Reactime is currently available to download, for free, in the Chrome Extension Store.
What is Reactime?
React, Facebook’s popular front-end framework, has been improving the developer experience since its release back in 2013. However, the process of diagnosing application issues has always been a thorn in the side of many React engineers. Reactime is a performance tool that serves as a one-stop shop for state management debugging and optimization.
How does Reactime work?
React Fiber is the core reconciliation algorithm behind React. Fiber constructs the component tree as a linked list of nodes, each of which can have a child and siblings, and walks the tree using a singly linked list tree traversal algorithm. When states are updated, Fiber specifically re-renders the nodes that subscribe to the mutated state, thus minimizing the amount of updating necessary for the application. Not only does each node reference other adjacent nodes via its linked list nature, the nodes also contain key information about the part of the application that they refer to.
Read more about React Fiber here.
Reactime works by traversing the React Fiber tree and capturing important information. This information, which includes key properties such as state and render time, is stored in “snapshots” that persist on Google Chrome’s local storage. Developers are able to use the application to analyze key characteristics of each snapshot. Additionally, they have the ability to time travel through these snapshots in order to track and visualize state changes.
The primary aspect of Reactime that has made it such a popular developer tool is its most endearing feature — time-traveling. While this is seen in the Redux DevTools, Reactime offers pure React applications a similar ability, allowing developers to move back and forth between snapshots and see changes instantly reflected in the DOM of the target application. However, prior to Reactime X’s iteration, time-traveling was only fully functional with applications built with traditional class components. As modernized codebases transition towards functional components that use React Hooks, Reactime’s time-traveling compatibility also had to be overhauled to enable full functionality with states set by React Hooks.
New Features in Reactime X:
Reactime Compatibility Now Includes Applications Featuring React Hooks
Reactime is now fully compatible with React Hooks! In order to enable full functionality with hooks, the Reactime X team dove under the hood and refactored Reactime’s core algorithms to dynamically account for the multiple state instances rendered by React Hooks. Reactime X also added new algorithms to enable time-traveling compatibility for hooks.
As Reactime parses through the React Fiber Tree, one of the most pertinent pieces of information that it captures is the snapshot’s current state. For class components, all instances of state are stored as properties on one object. When time-traveling, Reactime uses a useState hook, passing in the state object from the target snapshot, to update state on the target application. However, things start to get gnarly when hooks come into play, since individual states set with React Hooks are stored separately from one another. In order to account for this, Reactime X had to rewrite the core algorithm to compile each individual state instance into one object. When time-traveling, the team also had to refactor the algorithm to not invoke a generalized useState hook, but instead to utilize each state instance’s unique setter. As always with test-driven development, the team created additional Jest testing suites to pair with the enhanced compatibility of the tool.
Improved Data Visualization on History Tab
Prior to Reactime X, there was no information visible on the nodes in the history tab. If a user wished to see the state at a particular node, they would need to find the corresponding timestamp under the jump bar. In order to streamline the display of information, Reactime X added functionality to the history tab that allows the user to see the state of each node’s snapshot.
Additional Key UI/UX Improvements
While Reactime currently has many great features, there can always be upgrades made to the user interface/user experience. Some improvements that were implemented include:
- Enhancing the readability of the informational hover in the jump bar.
- Adding functionality in the map tab so that clicking anywhere on the screen closes the tooltip (previously only clicking inside the tooltip closed the popup).
- Improving the tooltip visibility on the WebMetrics tab.
Want to Contribute?
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. Let us know what you think down below or head over to GitHub or reactime.io for more information!
Contributors: Alex Gomez, Edar Liu, Kristina Wallen, Quan Le, Robert Maeda
