# How does React updates virtual DOM?

React relies on a process called reconciliation to update the virtual DOM and subsequently the real DOM. At the heart of reconciliation is a diffing algorithm that efficiently identifies the minimal changes required.

Here's a deeper dive into React's approach:

1. **Heuristic Approach:** Unlike some generic algorithms with high complexity, React utilizes a heuristic O(n) algorithm. This means the time to compare grows linearly with the number of elements (n). This efficiency is crucial for large applications.
    
2. **Key Assumptions:** The diffing algorithm makes two key assumptions:
    
    * **Different Types, Different Trees:** Elements of fundamentally different types (like `<div>` vs `<img>`) are assumed to have entirely different structures and hence lead to a full rebuild of the virtual DOM subtree.
        
    * **Key Prop for Stability:** Developers can provide a `key` prop for child elements. This prop helps React identify stable elements across renders, even if their content changes. This allows React to update only the content and avoid unnecessary re-renders of the entire element.
        
3. **Diffing Steps:** When comparing virtual DOM trees, React follows these general steps:
    
    * **Root Element Comparison:** It first compares the root elements. If the types differ (as mentioned earlier), a full rebuild happens.
        
    * **Recursive Comparison:** If the root elements are the same type (e.g., both are `<div>`s), React recursively compares their children.
        
    * **Updates Based on Differences:** Based on the identified differences, React determines how to update the real DOM:
        
        * **Re-render and Replace:** If elements have significant changes, they might be entirely re-rendered and replaced in the real DOM.
            
        * **Attribute Updates:** If only certain attributes change (e.g., a CSS class), React updates only those attributes in the real DOM.
            
        * **Reordering:** If the order of elements changes, React efficiently reorders them in the real DOM.
            

**Remember:** React prioritizes optimizations. If a change is complex or the `key` prop isn't effectively used, it might opt for a more conservative approach like a full rebuild for a subtree.

By leveraging this diffing algorithm, React minimizes unnecessary DOM manipulations, leading to a performant and responsive user experience in your web applications.