High-level overview of Reconciliation and React Fiber

Md Readwan
2 min readDec 19, 2023

--

Reconciliation

React’s diff algorithm compares two trees to identify the parts that require modification or update.

Update
a change to the data that a React application renders. typically the outcome of setState. leads to a re-render in the end. The big idea in React is to think of updates as if the whole app is being re-rendered each time there’s a change. Instead of worrying about how to move the app from one state to another, React lets developers think more simply and clearly.

re-rendering the entire app every time something changes works well for really simple apps. But in more complex apps, it’s not efficient because it uses up a lot of computer power. React has tricks that make it look like the whole app is being refreshed without actually doing it. This process is called “reconciliation.”

Reconciliation vs Rendering

React is flexible because it separates reconciliation and rendering into two steps. Reconciliation figures out what parts of the app need to change, and rendering actually makes those changes visible. React and React Native can use their own ways of showing things on the screen but still share the same reconciliation process from React.

Scheduling
The key points are:

  • In a UI, every update doesn’t need to be applied immediately; in fact, doing so can be wasteful, causing frames to drop and degrading the user experience.
  • • Different kinds of changes have different levels of importance. For example, making an animation smooth is more important than updating some information from a data store.
  • There are two approaches to deciding when to make changes: one where you (the programmer) decide, and another where React (the framework) decides for you.

What is a fiber?

Fiber is to enable React to take advantage of scheduling. Specifically, It lets React:

  • pause work and come back to it later.
  • assign priority to different types of work.
  • reuse previously completed work.
  • abort work if it’s no longer needed.

In order to do any of this, we first need a way to break work down into units. In one sense, that’s what a fiber is. A fiber represents a unit of work.

--

--

No responses yet