React Basic Animated Guide

The author of the note, which we are publishing today’s translation, says that there is a gap between using React to develop user interfaces and the need to know how React actually works. Many people who use React in practice are not aware of what is going on in the bowels of this library. Here, in animated form, we will consider some key processes that occur in React during the formation of user interfaces.

Launching a React Application

It should be noted that in order to create React applications, you probably may not know about the internal mechanisms of React. But I decided to prepare this material for all those who, for any reason, want to better understand the work of React. The described processes are presented in animated form. I hope this helps to make their analysis clearer.

React, when you first start the application, automatically mounts the App class to the root container of the application.

First Mount <App />

Virtual DOM and comparison algorithm

During the work of the React subsystem that implements the Diffing Algorithm, a search is made for the differences between the two virtual DOMs (Virtual Document Object Model, a virtual document object model). Slow down for a while. Two virtual DOM? There seems to be only one virtual DOM in React ... Let’s figure it out. React compares the previous virtual DOM with the new one. Updating the browser-based DOM is only possible if, when comparing virtual DOMs, differences between them are revealed.

Abstract animation of the React comparison algorithm. If it is found that the two virtual DOM trees are different, the real DOM in the browser is matched with the newest virtual DOM tree

Consider what happens on the above animation.

React Components

The React component is just a JavaScript object. React creates its own virtual DOM, which is a tree view of the entire user interface structure. React stores the virtual DOM tree in memory. Before what is in the virtual DOM is physically displayed in a browser window, React can perform many operations to add, update and delete items from the virtual DOM.

Do not use the render() component method for anything not related to rendering user interface elements. If you need to change the state or properties of a component, use standard methods of the life cycle of React components.

The render () method should always remain a pure function.

The render() method updates the virtual component DOM. If the new virtual DOM tree is different from the previously displayed tree, then React, in addition to updating the virtual DOM, will also update the real browser DOM. The developer does not have to directly update the browser DOM directly. This rule applies to all places in the code of a React application. It is especially important when applied to the render() function.

Don't pollute the render () method with function calls that somehow update the DOM directly

In the render() method, you should not change the state of the component (even using setState ), and perform HTTP requests. Do not access jQuery from this method, do not execute requests to load certain data. The fact is that the render() method needs to be maintained in a state in which it would be a pure function. This method is always called at the final stage of the component mechanisms. In the course of its implementation, you only need to update the user interface. It is assumed that all updates to the virtual DOM have already been completed.

Component Life Cycle Events

When a component is first mounted in the DOM, React raises its componentWillMount lifecycle event. After the virtual component is displayed for the first time (that is, it is mounted for the first time in the browser’s real DOM), another event is called - componentDidMount .

It is expected that most of the component logic invoked during all stages of the application will be described precisely in their life cycle methods.


Many React developers today use functional components and hooks instead of components based on classes and their life cycle methods. Life cycle methods are even considered unsafe. If you believe the React documentation, then perhaps these methods will be deprecated in the future. That is why the author considers this article as something like a description of technologies, some of which may soon go into oblivion. But he, despite this, hopes that this material will be useful to those who are just starting to get acquainted with React, and those who are interested in the history of the development of web development technologies.

Dear readers! Do you use React hooks?


All Articles