React Fiber & Reactime 4.0

Aquinojardim
Jul 16 · 5 min read

by Gabriela Aquino

Image for post
Image for post

Intro

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.

React Fiber 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.

Image for post
Image for post
Redux dev tools a NPM package connection

“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

__REACT_DEVTOOLS_GLOBAL_HOOK__

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.

“Monkey patching is a technique to add, modify, or suppress the default behavior of a piece of code at runtime without changing its original source code. It has been extensively used in the past by libraries, such as MooTools, and developers to add methods that were missing in JavaScript.” — Aurelio De Rosa blog

Image for post
Image for post
Reactime 4.0 monkey patching implementation

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.

Image for post
Image for post
A fragment of the React Fiber

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.

Image for post
Image for post
Image for post
Image for post
Reactime 4.0 data visualizations

Conclusion

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.


Image for post
Image for post
Learn more about Reactime 4.0 at https://reactime.io/

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store