How vdom and reconciliation works in React

React is a popular JavaScript library for building user interfaces, particularly single-page applications. It allows developers to create large web applications that can update and render efficiently in response to data changes. The key to its performance is the use of the Virtual DOM (VDOM). Here's how React and the VDOM work under the hood:

How React Works

1. Components:

   • React applications are built using components, which are reusable pieces of UI. Components can be class-based or functional.
   • Each component can maintain its own state and receive data via props.

2. JSX (JavaScript XML):

   • JSX is a syntax extension that looks similar to HTML. It allows you to write HTML-like code within JavaScript.
   • JSX is transpiled to React.createElement calls which generate the React elements that describe what you want to see on the screen.

3. State and Props:

   • State is an internal data storage for components, allowing them to manage and change their own data over time.
   • Props are inputs to a component that allow data to be passed from one component to another.

Virtual DOM (VDOM)

The Virtual DOM is a lightweight representation of the actual DOM. React uses the VDOM to improve performance by minimizing direct manipulation of the real DOM. Here’s how it works:

1. Rendering:

   • When a React component is rendered, it returns a description of the UI in the form of a React element, which is a plain JavaScript object.
   • This is the initial render where the VDOM is created based on the component's JSX.

2. VDOM Creation:

   • React creates a Virtual DOM tree from these React elements.
   • The VDOM tree is kept in memory and is a virtual representation of the actual DOM.

3. Diffing:

   • When the state or props of a component change, React creates a new VDOM tree.
   • React then compares the new VDOM tree with the previous one. This process is called "reconciliation" or "diffing".
   • React uses a diffing algorithm to find the minimal number of changes between the old VDOM tree and the new one.

4. Patching:

   • After finding the differences, React calculates the most efficient way to update the real DOM to match the new VDOM.
   • Only the parts of the actual DOM that need to be updated are changed. This process is called "patching".

React's Reconciliation Algorithm

React's reconciliation algorithm is optimized to minimize the number of updates to the actual DOM. Here are some key concepts:

1. Keys:

   • Keys help React identify which items have changed, are added, or are removed.
   • Keys should be provided to elements in a list to give them a stable identity.

2. Fiber Architecture:

   • React's Fiber architecture improves reconciliation by breaking down rendering work into units that can be spread out over multiple frames.
   • This allows React to be more responsive to user input by pausing work and resuming it later, rather than blocking the main thread.

Example: How React and VDOM Work Together

Let's walk through a simple example to see how React and the VDOM work together:

1. Initial Render:

   function App() {
     const [count, setCount] = React.useState(0);
   
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   

   • The App component returns a React element tree describing the UI.
   • React creates a VDOM based on this tree and updates the actual DOM to match.

2. State Change:

   • When the button is clicked, setCount updates the state.
   • React creates a new VDOM tree based on the updated state.
   • React compares the new VDOM tree with the previous one, finds the differences (in this case, the updated count), and updates only the relevant parts of the actual DOM.