single-head-img

React Fiber

August 7, 2017

What’s React at all?

React is a javascript library for building user interfaces. It’s so easy to create interactive UIs (User Interfaces) with it. Also, it’s pretty easy to make code easier for debug. React is component-based library and each component has own state. By using those components, you can compose complex UIs.

React Fiber

React Fiber is the name for the newest version of React (v16.0). It’s really important to know that this initial React v16.0 release is mostly focused on compatibility with existing apps. The makers of React Fiber don’t expect from this version to make apps significantly faster or slower. React Fiber is an re-implementation of React’s core algorithm. React is suited well for rendering data structures, but not for animating things in that structure at 60fps. React Fiber takes charge of solving problems like it by bringing a feature named “incremental rendering” which split rendering work into chunks and spread it out over multiple frames. So, in traditional way React uses Stack, but React Fiber will bring asynchronous reconciliation, assigning priority to different types of work.

Reconciliation

Reconciliation is a new algorithm which will be implemented through React Fiber version updates (16.x). On React official page, I found something more about that. In this article you can find out why Facebook (creator of React) chose exactly this algorithm. Shorten, this algorithm will help React to faster find out difference between trees (The Diffing Algorithm, difference between two DOM elements). Let me use same example React gives to us to explain this Diffing Algorithm more.

<div className="before" title="stuff" />

<div className="after" title="stuff" />

 

At this simple example, we have two React DOM elements of the same type. When we compare them, React will look at the attributes of both, and it will update only the changed attributes. The same principle exist when we have to change just one CSS property on style attribute of DOM node.

More powerful thing with Reconciliation algorithm is Recursing on Children. So, when there are same types of DOM elements as children of one parent element, the diffing algorithm will find them in the right order. The problem here is to find children in wrong order in the parent, e.g.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul>
  <li>Three</li>
  <li>Two</li>
  <li>One</li>
</ul>

 

So, when we’re comparing this DOM nodes with this diffing algorithm, we will fin just one same node (Two), but still we have two more same nodes (One and Three) just at the wrong order. To make it possible to get same DOM node in wrong order, React Fiber has Keys attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.

<ul>
  <li key="one">One</li>
  <li key="two">Two</li>
  <li key="three">Three</li>
</ul>

<ul>
  <li key="four">Four</li>
  <li key="three">Three</li>
  <li key="two">Two</li>
  <li key="one">One</li>
</ul>

 

Now React knows that the element with key ‘four’ is the new one, and the elements with the keys ‘one’ and ‘three’ have just moved.

Scheduling

One more important thing React brings to us is Scheduling. Scheduling is the process of determining when work should be performed. More about scheduling you can found again on official React site. Shorten, scheduling will help a lot UI rendering. For example, it’s not necessary for update to be applied immediately (frames drops, degrading the user experience…) and it’s important to have a priority with updates (fast animations updates first, then updates of data store, e.g).

Conclusion

React Fiber is the future of the great UIs. You can read more about it on this github page and also, you can find out current status of Fiber development on this site. About more completed concept of React Fiber, you can hear from Lin Clark on this youtube video from React Conf 2017.

I hope this mini-post helped you to understand React Fiber concept at all, and I hope you will enjoy to write your code through it. Cheers. 🙂

LEAVE A COMMENT