How Things Work

DOM Virtuel & Diffing

Comment React crée une représentation virtuelle et la compare pour trouver les changements minimaux du DOM.

How It Works

Le DOM Virtuel est un arbre d'objets JavaScript léger qui reflète le DOM réel. React conserve deux copies : l'arbre current et l'arbre 'work-in-progress' construit à chaque rendu. Au lieu de toucher immédiatement le DOM réel, React compare les deux arbres virtuels et calcule l'ensemble minimal de changements nécessaires — puis les applique en un seul lot.

Le JSX est compilé en appels React.createElement()

Lorsque vous écrivez du JSX, Babel (ou le compilateur React) le transforme en appels React.createElement(type, props, ...children). Ces appels retournent des objets JavaScript simples appelés éléments React — et non de vrais nœuds DOM.

React construit un arbre de DOM Virtuel

React.createElement() retourne un arbre d'objets imbriqués comme '{' type: 'div', props: '{' className: 'box', children: [...] '}' '}'. C'est le DOM Virtuel — une description en mémoire peu coûteuse de ce à quoi l'interface devrait ressembler.

Lors d'une mise à jour, React construit un nouvel arbre de DOM Virtuel

Lorsque le state ou les props changent, React rappelle votre fonction composant et produit un tout nouvel arbre de DOM Virtuel représentant la nouvelle interface souhaitée.

L'algorithme de diffing compare les anciens et nouveaux arbres

L'algorithme de diffing de React (heuristique O(n)) parcourt les deux arbres simultanément. Il suppose que les éléments de types différents produisent des arbres différents, et utilise la prop key pour faire correspondre les éléments de liste entre les rendus.

Seules les différences sont appliquées au DOM réel

Après le diffing, React dispose d'une liste de mutations : mettre à jour cette prop, insérer ce nœud, supprimer cet autre nœud. Elles sont appliquées au DOM réel lors de la phase de commit — minimisant les recalculs de mise en page et les repeints.

Key Concepts

📦Élément React

Un objet JS simple retourné par React.createElement(). Décrit le type, les props et les enfants. Pas un vrai nœud DOM.

🔍Algorithme de Diffing

L'heuristique O(n) de React pour comparer deux arbres virtuels. Suppose que les éléments à la même position sont du même type, sauf si les keys diffèrent.

⚖️Réconciliation

Le processus de comparaison des anciens et nouveaux arbres virtuels pour déterminer l'ensemble minimal d'opérations DOM nécessaires.

🔑prop key

Une identité stable pour les éléments de liste. Permet à React de faire correspondre les anciens et nouveaux éléments de liste même s'ils ont changé de position.

📦Mises à Jour Groupées

React collecte toutes les mutations DOM d'une passe de réconciliation et les applique ensemble, réduisant les recalculs de mise en page du navigateur.

Du JSX au DOM Virtuel

tsx

1// JSX you write:
2const element = <div className="box"><span>Hello</span></div>;
3
4// Compiles to:
5const element = React.createElement(
6  'div',
7  { className: 'box' },
8  React.createElement('span', null, 'Hello')
9);
10
11// Produces this Virtual DOM object:
12{
13  type: 'div',
14  props: {
15    className: 'box',
16    children: {
17      type: 'span',
18      props: { children: 'Hello' }
19    }
20  }
21}

💡

Why This Matters

La manipulation directe du DOM est coûteuse car le navigateur doit recalculer la mise en page et repeindre. En comparant en JavaScript (rapide) et en regroupant les écritures DOM (lentes), React minimise le nombre d'opérations coûteuses du navigateur. C'est pourquoi les applications React se sentent rapides même avec des interfaces complexes.

Common Pitfalls

⚠Ne jamais muter directement l'objet du DOM Virtuel — React suppose l'immuabilité pour détecter les changements efficacement.

⚠Évitez d'utiliser les indices de tableau comme keys dans les listes dynamiques. Si la liste se réordonne, React fera correspondre les éléments par position au lieu de l'identité, causant des démontages et remontages inutiles.

⚠Le DOM Virtuel n'est PAS gratuit — la création d'objets éléments a un coût. Pour des interfaces très simples sans state, du HTML simple peut être plus rapide.

Real-World Use Cases

1Optimizing Large List Rendering

Scenario

You have a chat app rendering 500+ messages. Scrolling to load older messages causes the entire message list to re-render, taking 300ms and causing visible lag.

Problem

When new messages are appended, React creates a new VDOM tree for the entire list. The diffing algorithm walks all 500+ nodes even though only 20 new messages were added.

Solution

Use windowing (react-window/react-virtualized) to only render visible messages in the VDOM. Combined with proper `key` props, React's diff only processes ~20 visible nodes instead of 500+. The VDOM tree stays small, diffs stay fast.

💡

Takeaway: The VDOM's diffing cost is proportional to tree size, not DOM size. Keeping your VDOM tree small via virtualization is the most effective optimization for large lists.

2Why Inline Objects Cause Unnecessary Diffs

Scenario

A component receives `style={{ color: 'red' }}` as a prop. Despite no visual change, React DevTools shows it re-renders on every parent update.

Problem

Each render creates a NEW style object `{ color: 'red' }`. When React diffs oldProps vs newProps, `oldStyle !== newStyle` (different object reference), so React marks this node as 'changed' and commits a DOM update — even though the actual CSS hasn't changed.

Solution

Hoist the style object outside the component or wrap it in `useMemo`. Now `oldStyle === newStyle` (same reference), the diff correctly marks it as 'unchanged', and React skips the DOM write entirely.

💡

Takeaway: Understanding how the VDOM diff compares props (by reference, not deep equality) reveals why inline objects, arrays, and arrow functions in JSX cause performance issues.

Join the discussion

Comments

Loading comments...

Cookie preferences

We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.