React.js: Why and how it works fast?

What is DOM?

So, What is Virtual DOM?

Reconciliation

How Does The Diffing Algorithm Works?

<ul>
<li>first</li>
<li>second</li>
</ul>
// React makes the changes without any issues here.<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
// React will make changes to the entire list below.<ul>
<li>Here to cause unnecessary changes</li>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
// React will make changes at right places.<ul>
<li key=12 >Here to cause unnecessary changes. But can't</li>
<li key=13 >first</li>
<li key=15 >second</li>
<li key=17 >third</li>
</ul>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store