Under the Hood of React

Before learning how to create dynamic components with React, it's useful to understand what happens under the hood. This helps you better anticipate React's sometimes surprising behaviors, and above all, build efficient interfaces.

Let's start with the heart of the engine: the Virtual DOM.

The Virtual DOM

The DOM (Document Object Model) is the HTML structure displayed in your browser. Modifying this DOM is costly in terms of performance.

To optimize all this, React uses a Virtual DOM: a JavaScript copy of the real DOM. Every time something changes in your component (a state, a prop), React:

1. Recreates a new version of this virtual copy
2. Compares the old version with the new one
3. Determines the differences (this is the diffing algorithm)
4. Applies only the actual changes to the browser