So at a really basic level, what does Fiber aim to accomplish? It wants to increase perceived JavaScript runtime performance by tell the browser what changes are most important and when they should be done. This is accomplished by providing a hierarchy of importance based on the priority of the action in the queue of needed actions. Fiber is strategy engine to make the JavaScript thread work better with the written components. It is a scheduler of the main (and only) thread.

At a really base level, React creates component trees that have state and actions (parent and child style) that needs to be built up, called, and handled as React moves down the tree and all the components’ lifecycle methods. A fiber is the data structure used by the thread to keep track of the current position on the component tree. This fiber is used to allow the main thread to come up for air and complete high priority tasks while it is working its way down the tree. Instead of the threads process execution order looking like the Grand Canyon with far reaching canyon walls, and a rock bottom, executed in an inefficient U fation, Fiber can schedule the thread to work more like fast rolling hills, reaching down when needed but able to come back up when needed.

Fiber builds the tree of changes and executes them in phases. Phase one is the reconcilation and render phase. Phase two is the commit phase. In the reconcile and reader phase, Fiber executes componentWillMount, componentWillRecieveProps, shouldComponentMount, and componentWillUpdate. In commit phase, componentDidMount, componentDidUpdate, and componentWillUnmount. By looking at when the lifecycle methods get called, Fiber’s hierarchy begins to take shape.

So in Fiber, what takes priority? What is most important? Fiber has six levels of priority. Here is a basic list. Watch the linked video for a better explanation of this.

Synchronous Actions Task Animations High priority actions Low priority actions Offscreen actions

React Fiber is not here as a new framework to be learned. Instead, Fiber is here to help the main thread execute the needed actions in a more efficient sequence of events, increasing performance without necessarily increasing execution speed. Pretty smart…