Register to get access to free programming courses with interactive exercises

Virtual Dom JS: React

One of the previous courses involved a first look at changing the DOM when interacting with a page.

This method drastically differs from the one used in the JS: DOM API course. The most important difference has to do with how the state of the screen that's rendered changes.

If you want to manipulate the DOM directly, you need to do the following:

  1. Remove the elements that have become irrelevant for the next state
  2. If necessary, change the elements that are present on the screen and must stay in the new one
  3. Add the new elements to the page point by point

In other words, to move to a new state, you should change the old one. So you have to know about him.

In React, it's very different. After any change and call to setState React creates a new state and draws all components as if from scratch. It does the rendering from scratch. It doesn't matter what content was on the screen up to that point or what its positioning was. Any change in React causes the application to be re-rendered.

The creators of React call this approach one-way data flow:

  1. A user action changes the application state via setState
  2. React starts the rendering loop. Starting from the component where the state was changed (usually the root component), the data gradually propagates through the props, from the higher level to the deepest components
  3. The resulting html is integrated into the page

One-Way Data Flow

Those familiar with the functional approach can see a direct link. React makes the world immutable. The easiest way to implement this behavior is to use mountElement.innerHTML, which replaces the entire html after the setState call.

In practice, this approach has a lot of difficulties (see the example implementation in the additional materials). But it allows you to build a library that will work like React in 200 lines.

The main problem with using innerHTML is related to performance. To say it's slow is an understatement. So the creators of React went another way.

Virtual DOM tree

Previously in the course, we said React renders components, which can be misleading.

Actually, it works like this:

  • First, we run a rendering - a call to the render function for the entire component tree
  • Then we create a so-called virtual DOM. It is just a JavaScript object with a certain structure that reflects the state of the screen
  • After that, React compares the new virtual DOM tree with the old one and builds the difference between them. It is a diff, an object describing the difference between the old and the new state
  • Only at this point does it start drawing the new state into the real DOM

By now, it should be clear that React is smarter than it looks. It makes changes to the DOM as efficiently as possible because it knows how to change it:

Virtual DOM

There is an important conclusion from the above. React controls the actual DOM — all of the descendants of the element into which we render the root component.

You can't modify it from outside the React application. If such a thing happens, React can't function because it has to keep track of the current state of the DOM to make diff calculations. When this happens, React says it's being interfered with.

Many people think that virtual DOM is not an end in itself. It is not quite correct. It is just an efficient way to implement the idea of a one-way data flow. If innerHTML worked, no one would make a virtual DOM.

Building a JavaSript object is much cheaper than working with the real DOM. But, sometimes, the calculation process takes a long time and slows the application. One of the following lessons will be devoted to this topic.

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Development of front-end components for web applications
10 months
from scratch
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.