React Fiber Overview

React Fiber Overview

What is React Fiber What is Reconciliation

What is Reconciliation?

A React application comprises of various React components, the components are organized in a tree structure with a root component and other child / nested components. When the React application loads it creates the component tree in memory called the Virtual DOM. Whenever a component gets updated in the tree React runs an algorithm to determine what changes should be made to the DOM to reflect the changes in the UI, this process of comparing the changes to update the DOM is called Reconciliation.

React reconciliation is based on 2 assumptions

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.