Reconciliation & Virtual DOM in React

React provides a declarative API so that you don’t have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. More info

Articles & Tutorials

React: "mount" vs "render"? (
Jan 31, 2020
Learning something new can come with a bunch of new terms. So what's the difference between "mounting" and "rendering" in React?
  • Brad Westfall
React, "Diffing" and the DOM (
Jan 08, 2020
The "Virtual DOM" or VDOM is very similar to the real DOM, in that it is a tree-like structure kept in-memory, where React elements are represented as objects.
  • Rachel Adaw
What Is React Reconciliation? (
May 19, 2018
In order for React to be as fast as it is, it only needs to update the parts of the DOM that need it. You really don’t need to worry about doing this yourself, but understanding how setState() in React works could be beneficial.
  • Tiffany White
How React Reconciliation Works (
May 17, 2018
As long as you understand the workings of setState(), you should be good to go. However, it’s also important to familiarize yourself with how this amazing library updates the DOM of your application.
  • Kingsley Silas
How React Virtual DOM Works: Why Is It Faster? (
Apr 26, 2018
What's the deal with the virtual DOM? How React virtual DOM works precisely? It's significantly faster, without question, and it brings a whole series of benefits to coding.
  • Radu Smileanu
Optimizing React: Virtual DOM explained (
Mar 28, 2018
In this thorough beginner-friendly introduction to framework’s internals, we will demystify JSX, show you how React makes rendering decisions, explain how to find bottlenecks, and share some tips to avoid common mistakes.
  • Alexey Ivanov
  • Andy Barnov
Virtual DOM in ReactJS (
May 07, 2017
In this article we will see why updating the Real DOM is slow, what is Virtaul DOM, and how updating Virtual DOM increase the performance?
  • Rupesh Mishra
How Virtual-DOM and diffing works in React (
Jan 24, 2017
The next section will summarize on how DOM is created and will give you idea on why React created a Virtual DOM in the first place.
  • Gethyl George Kurian

Video Guides & Talks

Reconciliation: The Root of Performant Applications (
Jul 04, 2019
In this talk we’ll look at an app that does everything wrong. As we fix the problems, we’ll see how React is able reuse more DOM nodes and reconcile the component tree and the DOM faster, recreating fewer nodes. By the end we’ll have a model for reconciliation that will give us a solid foundation for remembering best practices and building performant applications.
  • Jesse Kipp
Moving Beyond Virtual DOM and State Management (
Feb 16, 2019
The virtual DOM was a fantastic innovation. It brought about a much more productive way of writing web applications by allowing us to write our views in a declarative manner. This big benefit has little to do with performance of the initial render. Instead, it is the process of updating the DOM to reflect changes in your state has become much faster. This process of bringing the DOM in sync with the state is often referred to as DOM reconciliation.
  • Sindre Osen Aarsaether
Writing Your Own React Renderer (
Jan 07, 2019
Talk about reconciler, life cycles, and custom-renderer. The idea is to introduce how to create a custom renderer and how the reconciler handles elements, components, and instances.
  • Raphael Amorim

Podcast Episodes

Optimizing React Virtual DOM Explained Article with Alexey Ivanov and Andy Barnov (
Oct 30, 2018
In this episode, the panelists talk with Alexey Ivanov and Andy Barnov. They all discuss Alexey’s article titled: “Optimizing React Virtual DOM.” Listen to today’s episode to hear all the details about this article, the guests’ backgrounds and much, much more!
  • Lucas Reis
  • Justin Bennett
  • Alexey Ivanov
  • Andy Barnov