Virtual DOM

In the previous post, we discussed what React really is, the meaning of declarative UI, and its tree-like structure. Now, let’s continue that discussion further.

If you have worked with React, you have probably heard about state, how and why it is used. Don’t worry if you don’t know about it yet.

What is State in React?

State is information that can change over time and affects what a component renders.

Now, assume React renders the component and the user clicks a button. The information about whether the button is clicked or not is stored in this state.

Whenever the user clicks the button, the information in the state changes from its default value to clicked.

The state changes, so React schedules an update. The component is evaluated again. React compares the previous UI and the new UI to determine what needs to change in the actual DOM.

Previous UI vs. New UI

Here, you can see the two UIs: the previous UI and the new UI. So, what is the difference between them?

Understanding the Virtual DOM

To understand the difference, we need to discuss the Virtual DOM.

Assume you already have a UI. Now, you perform some action, and the UI changes.

To track the changes in the UI, React uses an in-memory representation of the updated UI.

To perform reconciliation, React compares both UIs: the previous UI that needs to be updated and the new UI created by React. This is commonly described as the Virtual DOM.

Note: I know this is an oversimplification, but to understand the idea of the Virtual DOM, this mental model is useful.

Using the Virtual DOM, React can determine the required changes instead of rebuilding the entire browser DOM every time the state updates.

The new UI we talked about is the Virtual DOM. Using reconciliation and the Virtual DOM, React updates the specific changes.

What is Reconciliation?

Now, I have used the word reconciliation many times. So, what is reconciliation?

Reconciliation is the process React uses to determine how the current rendered tree, which is the host tree, should change when new data or state produces a new tree, which is commonly referred to as the Virtual DOM.

In a web application, the host environment is generally the browser DOM. React is responsible for the UI programming model and reconciliation.