React Fiber and Virtual DOM Update Process

What is React Fiber?

React Fiber is a new reconciliation mechanism in React 16 that rethinks the rendering and update process. Its main goal is to make virtual DOM rendering incremental: break it into small "tasks", manage priorities and increase interface responsiveness even with large volumes of work.

Main Fiber Advantages

1. Update priorities
   • Higher priority tasks (animations, user actions) aren't blocked and can execute earlier.
2. Render splitting
   • Interrupt and resume render to avoid interface "freezing".
3. Concurrent Mode
   • Fiber serves as foundation for Concurrent Mode, allowing React to work asynchronously and adapt to current load.

---

Virtual DOM Update Process

React uses Virtual DOM to efficiently make changes to real DOM. This is implemented using Fiber, which describes component structure and tracks their changes.

Render Phase (Reconciliation)

1. Update initiation

   • Every state change (via setState, useState) enters update queue (Update Queue).
   • React can batch multiple setState calls in one event.

2. Work In Progress tree creation

   • React traverses Fiber tree, creating "draft" version of Virtual DOM (Work In Progress tree).
   • At this stage render functions are called (or render methods for class components), resulting in React getting new UI representation.

3. Diffing

   • React compares (diff) new Virtual DOM version (Work In Progress) with old one.
   • If element (component) types match, only changed attributes and child nodes are updated. If type changes, React rebuilds branch from scratch.

4. Working with keys (key)

   • For lists, reordering and dynamic elements, keys (key) help match original and new nodes, avoiding complete rebuild.

5. Side effects collection

   • At this phase React determines which DOM nodes need to be added, removed or changed.
   • "Effect list" is formed — what exactly should happen at next step.

6. Priority consideration (Fiber)

   • Each update in Fiber has priority. If new task with higher priority appears (button click, scroll), React can interrupt current render and return to it later.

Important: In Render Phase real DOM changes aren't yet applied.

---

Commit Phase (Applying reconciliation)

1. Applying changes to real DOM
   • React takes "effect list" and precisely updates real DOM: changes attributes, adds or removes nodes.
2. Lifecycle and hooks calls
   • In class components this is componentDidMount, componentDidUpdate, componentWillUnmount.
   • In functional components — useEffect, useLayoutEffect.
3. Batch updates
   • All changes within one event cycle are combined into one batch to avoid multiple small redraws.

---

Concurrent Mode and Fiber

Fiber is the foundation of Concurrent Mode, which provides more flexible render control mechanisms. In this mode React can partially show updated interface without blocking rest of application.

Concurrent Mode Advantages

• Smooth animations and transitions.
• Asynchronous processing of complex computations without interface "freezes".
• Priority rendering of important tasks.

---

Key Ideas

1. Virtual DOM
   • Stores and updates "draft" UI structure in memory, without heavy real DOM operations.
2. Diffing
   • Finds differences between old and new Virtual DOM versions.
3. Reconciliation
   • Applying changes to real DOM.
4. Fiber
   • Manages priorities, interrupts and resumes render, breaking it into small pieces.

Related Articles

• virtual-dom
• reconciliation