by Gabriela Aquino
We all know debugging React applications can be really draining. New state managers are created every year to make managing the state easier. Hooks and Context API bring a lot of flexibility to design our state patterns. But, without Redux, we miss one big tool: Redux Dev Tool, a legendary time travel debugger Chrome extension for Redux applications. Inspired by this legacy was Reactime created. Alongside a fantastic team of engineers, I had the pleasure to contribute to the new release Reactime 4.0. I would love to share how we got into the roots of React (or I better say the Fiber), to understand and improve Reactime in this new version.
What is Reactime?
Accord to Chris Flannery former engineer on the Reactime team
“Reactime is an open-source Chrome developer tool which allows developers to visually inspect the state of their app at any given moment, step forwards or backwards through time, import and export a snapshot of their current state, persist state across refreshes, yada yada yada… you get the idea.” — Chris Blog
Well that is the end user experience, but to understand what Reactime does under the hood we first need to understand what React does under the hood.
What is React Fiber?
On version 16.0.0, React changed its engine to a more sophisticated render system, with its own virtual stack, where a reconciliation algorithm manages priorities for smoother UX and animation. In the previous version of React, the reconciler recursively traversed a tree of immutable React Elements. React Fiber on the other hand is built on nodes that can be mutated and updated, avoiding the need to recreate the components on every render. The other advantage of the Fiber comes with its data structure type. React Fiber organizes the nodes by using a single linked list that can be traversed by parent-first or depth-first.
“React Fiber prioritizes re-rendering of certain components using React’s scheduler. For example, it may prioritize rendering a component triggered by an event listener over rendering a component off the screen” — Nate wa Mwenze, former engineer on the Reactime team
It is a really dense subject and if you want to go more in depth I recommend this amazing animation by Lin Clark.
Now that you have an idea about React Fiber architecture let’s explore different ways that we can access it.
Manipulating the React Fiber?
There are a couple ways to access the React Fiber data structure. On Reactime, until version 3.3 and also on the Redux dev tools, the Fiber is extracted directly on the top level of your application using NPM Package, and later on sent to the Chrome Extension.
“Reactime 4.0 removes the need to add debug tags or other instrumentation to track your state. Also, users no longer have to install an NPM package, but can simply install React DevTools, open up the extension, and can immediately see their state changes over time. ” — Carlos Perez, former engineer on the Reactime team
As my experience developing with React has taught me, NPM packages can be small but they add up, making your application heavy and slow. Focusing on performance and user experience, Reactime 4.0 decided to reinvent themselves and look for a solution to access the React Fiber with no need of an NPM install. The answer was on the
provided by React DevTools and accessible in the window object. Reactime then inserts a script into the active webpage that injects calls to our state capturing methods into React DevTools fiber monitoring event handlers .onCommitFiberRoot.
But with a great power comes great responsibility. While our“monkey patching” gives you the power to directly interact with an application’s context, if made incorrectly it also can easily break the source and slow performance. Now that we understand the risks, let’s see the reward. Below is a console.log of a small piece of the React Fiber from the injection.
How React Fiber appears on Reactime 4.0?
Getting access to the Fiber Managing a large and deeply-nested data structure as React Fiber requires careful planning and strategizing: how do we traverse it? What information do we want from it? How will we store this information? Reactime 4.0 retrieves and caches information extracted from the React Fiber of your app’s state and browser history at every Fiber commit. We focused on extracting information related to state and performance, and organized it in a hierarchical structure that could be easily translated into D3 source code.
React Fiber brings us new horizons to resolve old problems. Debugging React state can be difficult and Reactime is here to help. Reactime 4.0 makes debugging faster with visualizations and time travel. It can also help you optimize your application for scale with its new performance features. Reactime is an Open Source community and we can’t wait to see your collaborations and feedback.
How to Collaborate with Reactime?
Reactime is an Open Source community, always looking into growth and new ideas to improve. We’d love for you to try Reactime out — play around, break things, put in a PR, and let us know what you think! If you’re interested, please visit our Github and try out our chrome extension.