Time-Traveling State With Reactime
An open source debugging tool that snapshots current state and lets you step through previous states
🎉 Nominated for 2020 React Open Source Awards🎉
State management is a crucial part of developing efficient and performant React applications. Developers know that managing state can become unmanageable as an application scales. Reactime aims to improve the state debugging workflow by equipping developers with a robust suite of visualizations of their application’s state.
In this article, we will dive deeper into the mechanics of our tool, what’s happening under the hood with React Fiber, and the features we’ve implemented in the newest update.
What Is Reactime?
Reactime is an open-source React state debugging tool that tracks and visualizes state changes for developers. Reactime allows developers to time-travel and “jump” to previous states in their applications, allowing for a seamless debugging process. Reactime makes use of React Fiber, which we will explain in greater depth below.
What Is React Fiber?
React Fiber was implemented with the 16.0.0 update to React, and we can think of it as an update to React’s previous “engine.” React Fiber is essentially a set of algorithms and processes that React uses to render applications efficiently. Fiber nodes are units of information React produces with React Fiber.
For example, if we have an App component that simply renders a div:
Its corresponding Fiber node would look like this:
From the example above, each Fiber node contains data about an individual part (components, HTML tags, etc.) of the React application. The Fiber nodes reference each other as either parents, children, or siblings through a singly linked list data structure
Fun fact: This is one of the few times you see this data structure in the wild!
Through these references, the Fiber nodes create a tree-like data structure representing the React application. In the next section, we’ll talk about how Reactime leverages React Fiber to carry out its core functionality.
How Does Reactime Work?
At a high level, Reactime captures snapshots at every state change in an application and renders them in real-time to a visual hierarchical graph. By recording a snapshot before every state change in an application, Reactime is able to time-travel to an application’s previous state by simply pressing a button.
Furthermore, with access to the entire application’s data through the Fiber tree, we traverse the Fiber nodes with a recursive depth-first search algorithm to extract data that’s meaningful and shaped to fit the required data structure of D3 and visx.
What’s New in Reactime 6.0?
- Expanded compatibility with Recoil’s newest update (0.0.13).
- Added visualization to map atom and selectors to their respective components.
- Improved history tab by contextualizing snapshots with a dynamic legend.
- Re-envisioned the component map by incorporating a visualization D3/React library called visx to provide users with more robust views.
- Revamped the performance tab to better visualize component rendering trends and potential performance bottlenecks as state changes.
- Giving visualized components
onHoverfunctionality that highlights corresponding DOM elements. - Overall general enhancements to the code base (improving modularity, reducing technical debt, and enhancing onboarding).
To learn more about Recoil and visx, please check out these references:
How to Download or Collaborate With Reactime
We’re really excited to be sharing this with the open source community, and we’d love for you to try Reactime out. Feel free to play around, break things, put in a PR, and let us know what you think!
Contributors: Vincent Nguyen, Sanjay Lavingia, Jason Victor, Chris Guizzetti, and Alexander Landeros
