Suggest an editImprove this articleRefine the answer for “What is the "diffing algorithm"?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The **diffing algorithm** is the **heart of React's reconciliation mechanism**. **Key point:** it determines exactly which parts of the virtual tree (Virtual DOM) changed between the previous and the new interface state, so the real DOM can be updated minimally.Shown above the full answer for quick recall.Answer (EN)ImageThe **diffing algorithm** is the **heart of React's reconciliation mechanism**. It determines **exactly which parts of the virtual tree (Virtual DOM)** changed between the previous and the new interface state, so it can **update the real DOM minimally**. --- ## In simpler terms When a React component re-renders: 1. React creates a **new virtual tree (Virtual DOM)**. 2. Compares it with the **previous virtual tree**. 3. **Finds the differences (diff)** between them. 4. Applies only the **changed parts** to the real DOM. The algorithm that performs this "smart" comparison step is called the **diffing algorithm**. --- ## Why it is needed Working with the DOM is an expensive operation. If React simply recreated the entire tree on every change, the interface would "lag" even for the smallest changes. The **diffing algorithm** lets React: - understand *exactly what changed*; - update *only the changed spot*; - do it *as fast and efficiently as possible*. --- ## How diffing works in React (the main rules) React uses a **simplified and optimized** diffing algorithm based on **two key assumptions**: --- ### 1. Elements of **different types** → treated as **completely different** If an element's type changed (`<div>` → `<span>` or `ComponentA` → `ComponentB`), React **removes the old node** and **creates a new one from scratch**. ```javascript // Before <div>Hello</div> // After <span>Hello</span> ``` React completely removes the `<div>` and creates a new `<span>`. --- ### 2. Elements of **the same type** → React compares their **attributes (props)** React checks which props changed and **updates only those, precisely**. ```javascript <button disabled={false}>Button</button> // → <button disabled={true}>Button</button> ``` React changes only the `disabled` attribute. --- ### 3. **Lists of elements** are compared by their **keys (**`key`**)** This is the **most important rule** for lists (`.map()`). React compares list elements **by their keys** to understand **which ones stayed, were removed, or were added**. ```javascript {items.map(item => <li key={item.id}>{item.text}</li>)} ``` If the keys: - are the same - React **keeps** the element (only updates its content); - differ - React **removes** the old element and **creates a new one**. #### Without keys: React thinks the elements just "shifted" and **repaints the whole list**. #### With keys: React "understands" that **only one element** changed and updates **only that one**. --- ## Example of how the diffing algorithm works ### Before: ```javascript <ul> <li key="a">A</li> <li key="b">B</li> </ul> ``` ### After: ```javascript <ul> <li key="b">B</li> <li key="a">A</li> </ul> ``` If there are **no keys**, React decides that both elements changed and **recreates** both `<li>`s. If there **are keys**, React understands the elements just **swapped places** and **reorders them** without recreating them. --- ## The algorithm's running time A naive comparison of two trees node by node is **O(n³)** (very slow). React optimized this down to **O(n)** thanks to keys and simplified rules: - it does not compare different types; - it only compares sibling nodes; - it uses keys to track moves. --- ## Diffing within the Fiber Architecture Since React 16+, diffing has become **incremental and prioritized**: - diffing can be **paused** for less important components; - it can be **resumed** later (Concurrent Rendering); - **priorities can be assigned to updates** (for example, text input > animations). --- ## Summary | What the diffing algorithm does | Why it's needed | |---|---| | Compares the old and new virtual tree | To determine where the interface changed | | Determines the minimal differences (diff) | To update the DOM as little as possible | | Uses comparison rules by type and keys | To be as fast as possible | | Runs in O(n), not O(n³) | To scale even on large trees | | Is part of reconciliation | It's part of the process of "reconciling" changes |For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.