What is React Fiber

React Fiber is a re-write of React’s core algorithm which aims in improved rendering and responsiveness of the UI. React Fiber helps in improving performance of UI intensive operations like animation, layouts etc. React Fiber improves the algorithm to render / re-render changes to the DOM thereby improving the performance / UI responsiveness of React applications.

To better understand React Fiber we should first understand the concept of Virtual DOM and Reconciliation in React, let us look at these in brief.

When we render a React Component it creates a tree structure with the component and its child components this is called the Virtual DOM. When there is any update to the component (state or prop) then React uses an algorithm to validate the changes and creates an updated copy of the Virtual DOM. Based on the comparison React then updates the actual DOM with the updated nodes.

This process of comparing the Virtual DOM elements to determine which node in the tree is to be updated is called Reconciliation. The comparison process starts from the root node and traverses till the leaf node till it compares and identify the changes. If it finds a node is updated then the tree under the node is re-created in the Virtual DOM.

The process of reconciliation before the React Fiber was a continuous one, once it starts at the root node it will continue till it traverses and compares all the nodes till the leaf node. This process is expensive, if there are many child components are more / complex then it takes more time to complete this reconciliation process as a result the responsiveness in the UI will be slow.

The React Fiber brings improvement to this algorithm instead of doing this process continuously it can automatically suspend the activity of some components and give priority to other components that are more important for the current state of the application, thereby improves the performance of reconciliation and improves the UI responsiveness.