Reconciliation & Virtual DOM in React

Learning something new can come with a bunch of new terms. So what's the difference between "mounting" and "rendering" in React?

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.

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.

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.

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.

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.

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?

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.

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.

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.

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.

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!