React : Why use React? (Virtual DOM)

Virtual DOM

Problem with websites made with existing html / CSS / js

Whenever a DOM change occurs due to some interaction, the render tree is recreated. That is, the style of all elements is recalculated.

https://dimension85.com/glossary/critical-render-path

This provides the potential for the web to slow down when there is a lot of interaction.

Virtual DOM is a copy of the real DOM into memory.

https://dev.to/iamusj/what-is-the-virtual-dom-2e0a

In React, the Virtual DOM (Document Object Model) is a lightweight representation of the actual DOM. It is a JavaScript object tree that mirrors the structure of the real DOM elements in the UI. The concept of the Virtual DOM is one of the key factors that contribute to the performance and efficiency of React applications.

Here's how the Virtual DOM works in React:

1. Initial Rendering: When a React component is initially rendered, React creates a representation of the component's UI using the Virtual DOM. This Virtual DOM consists of JavaScript objects, known as virtual DOM nodes or virtual elements, that correspond to the actual HTML elements.
2. Reconciliation: When the state or props of a component change, React re-renders the component. However, instead of directly manipulating the real DOM, React first updates the Virtual DOM with the new state or props.
3. Diffing: After the Virtual DOM is updated, React performs a process called "diffing" or "reconciliation" to determine the differences between the previous Virtual DOM and the updated one. React efficiently identifies which parts of the Virtual DOM have changed.
4. Minimal Updates: Once the differences are identified, React calculates the minimal set of changes required to update the actual DOM. It creates a patch, or a set of instructions, that specifies what changes need to be applied to the real DOM to reflect the updated state of the UI.
5. Efficient Rendering: Finally, React applies the patch to the real DOM, updating only the necessary parts. By applying the minimal set of changes instead of re-rendering the entire UI, React minimizes the performance impact and provides a smoother user experience.

The benefits of the Virtual DOM in React include:

• Performance Optimization: The Virtual DOM allows React to optimize the rendering process by reducing the number of actual DOM manipulations. Instead of directly updating the real DOM for every change, React batches and performs updates in an optimized manner.
• Efficient Updates: By performing a diffing process between the previous and current Virtual DOM, React identifies the minimal changes needed and avoids unnecessary re-renders. This approach reduces the computational overhead and improves rendering speed.
• Abstraction from Browser-Specific APIs: The Virtual DOM provides a consistent programming interface that abstracts away the differences between various browser-specific APIs and allows developers to write code in a browser-agnostic way.
• Developer-Friendly: The Virtual DOM makes it easier for developers to reason about the state and rendering of the UI. By working with a JavaScript representation of the UI, developers can leverage the rich ecosystem of JavaScript libraries, tools, and techniques for manipulating data and building dynamic UIs.

It's important to note that while the Virtual DOM helps optimize the rendering process, it does introduce a small performance overhead compared to direct DOM manipulation. However, the benefits of React's Virtual DOM far outweigh this overhead, especially in complex UIs or applications with frequent state changes.

Overall, the Virtual DOM in React serves as a key component of React's performance optimization strategy, enabling efficient updates, minimizing unnecessary re-renders, and providing a smooth and responsive user interface.