How Does Diff Algorithm Make React So Fast? ??
Anup Kumar Jana
Frontend Developer - React JS, Redux, JavaScript, TypeScript , Bootstrap, Firebase, MySQL, Python
Diff algorithm in my words is simply, an algorithm which identifies the difference. Difference between what? Difference between Old Virtual DOM and New Virtual DOM.
Let’s get back to our school days-
Suppose you got less marks in Maths and your teacher told you get an signature of your parents on it. Surely if you’re like me, you’re not gonna show it to your parents??. So you’ll definitely ensure the perfect signature by parctising on another paper and then you’ll sign the actual exam paper.
Where you practised the signature is the Virtual DOM. And the exam paper is the Actual DOM. (not an exact example, but I hope it’ll clarify your understanding a lil bit)
Now, what is Virtual DOM?
Now, what exactly is the Virtual DOM? It’s nothing but an object representation of the Actual DOM. The Actual DOM is constructed with tags and their content, as demonstrated by the HTML/JSX
<body>
<h1 id="mainHeading">Hello, World!</h1>
<p>This is a sample paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
The corresponding Actual DOM structure is:
body
├── h1#mainHeading
│ └── text: Hello, World!
├── p
│ └── text: This is a sample paragraph.
└── ul
├── li
│ └── text: Item 1
├── li
│ └── text: Item 2
└── li
└── text: Item 3
And Virtual DOM is the object like this :
{
type: 'body',
props: {},
children: [
{
type: 'h1',
props: { id: 'mainHeading' },
children: [
{
type: 'text',
content: 'Hello, World!'
}
]
},
{
type: 'p',
props: {},
children: [
{
type: 'text',
content: 'This is a sample paragraph.'
}
]
},
{
type: 'ul',
props: {},
children: [
{
type: 'li',
props: {},
children: [
{
type: 'text',
content: 'Item 1'
}
]
},
{
type: 'li',
props: {},
children: [
{
type: 'text',
content: 'Item 2'
}
]
},
{
type: 'li',
props: {},
children: [
{
type: 'text',
content: 'Item 3'
}
]
}
]
}
]
}
In the React.createElement(tag, attribute, content) method, the "type" is the tag, "props" are attributes, and "children" are the content or child of content. Essentially, you can nest more React.createElement() calls within the content, forming an array.
Let’s see what is Old virtual DOM and New Virtual DOM
Suppose you initially rendered three product cards, each with a unique key. By clicking a button, the state is updated, and the new Virtual DOM is created, reflecting that one product card has been filtered out.
领英推荐
Old Virtual DOM
State got updated and and created the New Virtual DOM
During the reconciliation process, the Diff Algorithm efficiently matches elements based on their keys. If an element has the same key in both the old and new Virtual DOMs, the Diff Algorithm identifies it as the same element. In our example, three product cards initially rendered: Product-1 with a rating of 4.0, Product-2 with a rating of 2.8, and Product-3 with a rating of 4.2.
Now, if the state is updated, and the new Virtual DOM is created, the product with a rating of 2.8 is no longer part of the updated state, the Diff Algorithm recognizes the unique key associated with Product-2 and flags it for removal.
In this scenario, the key serves as a crucial identifier, allowing the Diff Algorithm to understand changes accurately during the reconciliation process.
After that, the reconciliation process will update the actual DOM, ensuring that the product card with a rating of 2.8 is efficiently removed from the displayed content.
This explains how the Diff algorithm, by its consideration of unique keys, make precise identification and removal of elements during the update of the Virtual DOM, leading to optimized and effective updates in the actual DOM, minimizing unnecessary updates for optimal performance.
That’s how the Diff algorithm makes React so fast by efficiently checking the Virtual DOM updates.
Follow me on Linkedin : Anup K Jana ??
Follow me on Medium : Anup K Jana ????
Check out my portfolio : anupz.dev ??