Skip to content

Latest commit

 

History

History
19 lines (15 loc) · 1.57 KB

EP6_Notes.md

File metadata and controls

19 lines (15 loc) · 1.57 KB

React Virtual DOM, Fiber, and Reconciliation

1. Virtual DOM

  • React uses a virtual DOM to efficiently manage updates to the actual DOM.
  • The virtual DOM is a lightweight copy of the real DOM, and React uses it to detect changes by comparing it with the current state of the actual DOM.
  • Reconciliation is an alorithm or the process where React compares the virtual DOM with the real DOM (also known as "diffing") and updates only the parts that have changed, not the entire DOM tree.

2. The Problem with Multiple Updates

  • When users trigger multiple updates (e.g., changing the same element repeatedly), React ensures that only the latest update is applied.
  • React does this by batching updates—combining multiple changes and updating the DOM in one go to improve performance.

3. React Fiber Architecture

  • Fiber is React’s new reconciliation algorithm designed to optimize UI rendering.
  • In older versions of React, large updates could block the main thread, causing the UI to become unresponsive.
  • React Fiber breaks down rendering into smaller units of work, allowing React to pause, prioritize, or reuse work so that updates are applied smoothly without blocking the UI. This architecture improves React's ability to handle complex and asynchronous rendering.

Key Features of React Fiber:

  • Time-Slicing: Fiber breaks work into smaller pieces so that React can work on the highest priority updates first, improving responsiveness.
  • Concurrency: It allows React to pause work and continue later, enabling smoother interactions even when updates are frequent.