Virtual DOM ( Document Object Model)

The virtual DOM is a concept in web development, particularly in libraries and framework like React, that optimizes the way changes to the UI are handled.

How the virtual DOM works :-

1. Real DOM : The regular DOM ( Document Object Model ) is a tree structure representing the web page’s structure. it directly reflects the UI of the webpage, when changes are made to the UI (e.g., updating a component or changing context) , the real DOM has to re-render parts or the the entire tree,which can be slow or inefficient.

2. Virtual DOM : The virtual DOM is an abstraction or lightweight copy of the real DOM, created in a memory. whenever the state web application changes, the changes are first applied the virtual DOM , not the real DOM.

3. Reconciliation : After changes are made to the virtual DOM, it is compared to previous version of the virtual DOM. This process is called reconciliation. The difference between the two version ( the “diff” ) is identified.

4. Efficient updates : Instead of updating the entire real DOM , the virtual DOM allows the system to update only the part of real DOM that have actually changed. This minimizes the number of operations on the real DOM , improving performance.

Why use virtual Dom :-

• Performance : Updating the real DOM can be slow , especially in large applications.By only updating parts that have changed the virtual DOM significantly reduces the workload .

• Abstraction : the virtual DOM abstracts away direct manipulation of the DOM , allowing developers to think in terms of state and components without worrying about DOM operations.

• Smooth UI rendering : It helps in rendering UI more smoothly , especially with frequent updates, since only necessary parts of DOM are touched.

Now we understand what is “Virtual DOM"and how it works but the question is:-

Is virtual DOM is still used in React :-

Yes, Virtual DOM is still used in React, but there are improvements and new techniques being developed to further optimize performance , especially with React 18 introducing features like Concurrent Rendering and Fiber Architecture.

1. React Fiber (introduced in React 16) :

   React Fiber is a complete reimplementation of React's core algorithm, aimed at improving rendering performance and flexibility , particularly for complex applications.

• How fiber improve performance : In traditional virtual DOM rendering, when react re-renders a component , it performs all updates synchronously , meaning it has to finish rendering all changes before moving on Fiber allows React to break down the rendering work into smaller chunks, which can be paused and resumed. This allows React to manage multiple tasks more efficiently.

• Why It’s better : React fiber makes the UI more responsive by allowing interleaving of high priority tasks ( like User Input) with low priority rendering tasks. it means that , for example , if a user interacts with the page , React can prioritize that interaction and delay less important UI updates. This result in a smoother and faster experience , especially for apps with complex updates or animations.

2. Concurrent Rendering (introduced in React 18) :

   concurrent rendering builds on top of React fiber to allow rendering to happen in a more interruptible and non-blocking way.

• How concurrent rendering works: In React’s earlier versions , the virtual DOM updates were synchronous. This meant that once React started rendering updates , it wouldn’t stop until it was done. In contrast, with concurrent rendering, React can work on multiple tasks at once and defer low priority tasks. for example, if there’s a heavy data load or UI update , React can pause that work and quickly respond to user input , then go back to completing the update.

  → Why It’s Better : -

• Improved Responsiveness : By allowing React to pause and resume tasks , The UI remains responsive, especially under heavy load.

• Streaming SSR ( Server-Side-Rendering ) : concurrent rendering improves server-side rendering by allowing parts of the page to be sent to the user while other parts are still being processed, leading to faster initial load times.

• React Suspense : It also allows feature like suspense to work more effectively, letting developers specify fallbacks while waiting for asynchronous data (e.g., API responses)

3. Selective Hydration in Server-Side Rendering :

• How It Works : Hydration is the process of taking a static HTML page from the server and making it interactive by attaching event listeners and React state to it. In earlier versions, React had to fully hydrate the entire page before making any part interactive with selective hydration in React 18 . React can hydrate only the part of the page that are immediately necessary, making the page interactive faster.

• Why It’s Better : Users can start interacting with parts of the page before the entire page is hydrated, leading to better perceived performance.