What?

React Fiber is an architecture introduced to public with React 16. It's a low-level abstraction that we can't directly access while working on an application.

In a bit more technical term, it's a reconciliation algorithm.

But what's reconciliation????

What?

Reconciliation: It's the diffing algorithm of React that decides what updates are to be pushed to the DOM.

What?

React fiber is about 4 major changes in the old reconciliation algo:

• Assign priority to tasks.
• Switch between tasks w.r.t priority to update the DOM. Which is about pausing the current work and coming back to it later.
• Reuse previously completed work.
• Abort the work if it's no longer needed.

How?

React first used to have an architecture called Stack.

Stack vs Fiber

Stack updates the DOM nodes while traversing the tree.

Fiber keeps a work-in-progress tree along with the main fiber tree.

How?

Stack Tree updates each and every element synchronously and cannot switch between tasks.

So if we're updating a list then we suddenly switch to filling an input field, the stack reconciler will first complete the list updation and then paint the input field with update.

It's like blocking the main Javascript thread. This results in inconsistent user interface.

How?

Fiber tree uses phases to prioritize the tasks.

Phase 1:
Reconciler - Can be interrupted.

Phase 2:

Commit: Can't be interrupted.

How?