Le tour de magie de React : Comment les composants prennent vie

En une phrase

React est une librairie JavaScript pour construire des interfaces utilisateur en les découpant en morceaux de code autonomes et réutilisables appelés « composants », qui se mettent à jour automatiquement lorsque leurs données changent.

Le problème que ça résout

Imaginez le développement web à l'ancienne (disons, au début des années 2010). Vous aviez une page web, et vous vouliez la rendre interactive. Peut-être qu'un bouton « J'aime » devait devenir bleu et mettre à jour un compteur au clic. Avec un outil comme jQuery, vous auriez écrit du code qui disait : « trouve le bouton dans la page, écoute l'événement de clic, et quand ça arrive, trouve l'élément du compteur et change son texte, puis trouve l'icône du bouton et change sa couleur ».

C'est une approche impérative. Vous donnez au navigateur une recette étape par étape sur la façon de modifier la page. Ça marche pour un bouton « J'aime ». Mais quid d'un fil d'actualité de réseau social complet avec des centaines de publications, de commentaires, de notifications et une fenêtre de chat en direct, le tout se mettant à jour en même temps ? Les « recettes » deviennent un enchevêtrement de code spaghetti. Un changement à un endroit pourrait casser de manière imprévisible quelque chose de complètement différent. Garder l'interface utilisateur (UI) cohérente avec les données de l'application était une bataille constante et source d'erreurs.

Facebook vivait ce cauchemar à grande échelle. En 2011, ils ont créé React pour résoudre ce problème en interne. React a introduit un modèle déclaratif. Au lieu de dire au navigateur comment changer les choses, vous décrivez simplement à quoi l'UI devrait ressembler pour un état donné. Vous déclarez : « Si la publication est liked, le bouton doit être bleu et le compteur doit être à 101. Si elle n'est pas liked, le bouton est gris et le compteur est à 100 ». C'est tout. Quand l'état liked passe de false à true, React se charge de trouver le moyen le plus efficace de mettre à jour le bouton et le compteur. Il gère le « comment », pour que vous puissiez vous concentrer sur le « quoi ».

Ce passage de la pensée impérative à la pensée déclarative a été une révolution. Il a rendu la construction d'interfaces complexes et basées sur les données plus prévisible, scalable et plus facile à déboguer.

Comment ça marche sous le capot

La « magie » de React n'est pas vraiment magique ; c'est une combinaison astucieuse de trois idées fondamentales : le JSX, les Composants avec leur État (State), et le DOM Virtuel.

JSX : du JavaScript enrobé de sucre syntaxique

Quand vous regardez du code React, vous voyez quelque chose qui ressemble beaucoup à de l'HTML intégré directement dans du JavaScript. C'est le JSX (JavaScript XML).

const greeting = <h1>Hello, FlowingDev user!</h1>;

Votre navigateur n'a aucune idée de quoi faire avec ça. Ce n'est pas du JavaScript valide. Avant que ce code puisse s'exécuter, il doit être « transpilé » (transformé) par un outil comme Babel. La ligne de JSX ci-dessus est convertie en un appel de fonction JavaScript tout ce qu'il y a de plus normal.

const greeting = React.createElement("h1", null, "Hello, FlowingDev user!");

Chaque balise JSX devient un appel à React.createElement(). Cet appel de fonction ne crée pas un véritable élément HTML. Il crée un objet JavaScript léger qui décrit l'élément que vous voulez créer — son type (h1), ses propriétés (aucune dans ce cas, donc null), et ses enfants ("Hello..."). Ces objets sont les briques de base du DOM Virtuel.

Le JSX n'est donc que du « sucre syntaxique ». Il nous permet de décrire notre UI avec une syntaxe familière, proche de l'HTML, mais sous le capot, nous ne faisons que créer un arbre d'objets JavaScript.

Composants et État (State) : le cerveau de l'opération

Un composant est une fonction JavaScript qui retourne du JSX. C'est un morceau d'UI réutilisable et autonome.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Ce composant Greeting est simple. Il prend un name en entrée (appelé une « prop ») et affiche un titre. Mais si on veut qu'un composant se souvienne de choses et change au fil du temps, comme un compteur ? Pour cela, il nous faut un « état » (state).

L'état, ce sont des données qu'un composant « possède » et peut modifier. React fournit des fonctions spéciales appelées « hooks » pour gérer ça. Le plus courant est useState.

import { useState } from 'react';

function Counter() {
  // "count" est notre variable d'état.
  // "setCount" est la *seule* fonction qu'on peut utiliser pour la mettre à jour.
  const [count, setCount] = useState(0); // La valeur initiale est 0.

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez-moi
      </button>
    </div>
  );
}

Quand vous appelez setCount(count + 1), vous ne faites pas que changer une variable. Vous dites à React : « Hey, l'état de ce composant Counter a changé. S'il te plaît, ré-exécute cette fonction pour obtenir la nouvelle UI, puis mets l'écran à jour. » React « re-render » alors le composant, obtient le nouveau JSX avec le count mis à jour, et met efficacement la page web à jour.

Le DOM Virtuel : l'arme secrète de React

Modifier directement le vrai DOM du navigateur (l'arbre d'éléments HTML en live) est lent. C'est comme redécorer une pièce en abattant tous les murs pour les reconstruire, même si vous vouliez juste déplacer un cadre photo.

React évite ce travail coûteux avec son arme secrète : le DOM Virtuel (VDOM). Le VDOM est simplement une copie du DOM conservée en mémoire JavaScript. C'est cet arbre d'objets React.createElement dont on parlait.

Voici le processus, connu sous le nom de réconciliation :

Rendu initial : Quand Counter est rendu pour la première fois, React construit un arbre VDOM qui décrit un div contenant un p avec le texte « Vous avez cliqué 0 fois » et un button. Il l'utilise ensuite pour créer les vrais éléments DOM sur la page.
Changement d'état : Vous cliquez sur le bouton. setCount(1) est appelé.
Nouveau rendu et nouveau VDOM : React ré-exécute la fonction Counter. Il construit un nouvel arbre VDOM. Ce nouvel arbre est presque identique à l'ancien, mais le p décrit maintenant le texte « Vous avez cliqué 1 fois ».
Diffing : L'algorithme de « diffing » de React compare le nouvel arbre VDOM avec l'ancien. Il les parcourt à toute vitesse et trouve les différences. Dans ce cas, il ne trouve qu'une seule différence : le texte à l'intérieur de la balise <p> a changé.
Mise à jour par lot : React prend ce tout petit changement et l'applique au vrai DOM. Il ne touche ni au div ni au button ; il met juste à jour le texte du p.

Ce processus de comparaison et de mise à jour (diff-and-patch) est incroyablement rapide. En regroupant les mises à jour et en minimisant la manipulation directe du vrai DOM, qui est lent, React donne l'impression que les interfaces sont vives et réactives, même quand des données complexes changent rapidement.

Histoires vécues

Le cas des données de formulaire qui disparaissent

Un dev junior avait pour mission de construire un formulaire d'inscription utilisateur complexe en plusieurs étapes. Chaque étape était un composant différent. À un moment, il a eu besoin d'une petite case à cocher à l'étape 2 pour afficher conditionnellement un champ de saisie supplémentaire. Il l'a implémenté, mais s'est soudain retrouvé avec un bug étrange : chaque fois qu'un utilisateur cochait cette case, toutes les données qu'il avait saisies à l'étape 2 s'évanouissaient.

Le coupable était une mauvaise compréhension des « keys ». Pour afficher le champ supplémentaire, le développeur modifiait la structure de son JSX d'une manière qui faisait croire à React que tout le composant de formulaire de l'étape 2 était un composant nouveau et différent. Sans une prop key stable pour l'identifier, React a détruit l'ancien composant (avec tout son état, c'est-à-dire les saisies de l'utilisateur) et en a monté un tout neuf à la place.

La leçon : La prop key n'est pas seulement pour les listes. C'est une identité stable pour un composant. Comprendre comment React utilise les keys pour suivre les composants entre les rendus est crucial pour préserver l'état et éviter les réinitialisations inattendues.

Le marteau-piqueur d'API infini

Une équipe développait un tableau de bord qui affichait des données boursières en direct. Un développeur a écrit un composant pour récupérer le dernier prix d'une action spécifique en utilisant le hook useEffect. Le code ressemblait à quelque chose comme ça :

useEffect(() => {
  fetchStockPrice(stockSymbol).then(price => {
    setPrice(price); // Met à jour l'état avec le nouveau prix
  });
}); // Oups, pas de tableau de dépendances !

Dès que le composant s'est chargé, l'application a gelé, le ventilateur de l'ordinateur portable du développeur s'est emballé, et la surveillance réseau a montré des milliers de requêtes API identiques tirées par seconde. Il avait créé une boucle infinie. Le useEffect récupérait les données et appelait setPrice. La mise à jour de l'état provoquait un nouveau rendu du composant. Comme le useEffect n'avait pas de tableau de dépendances, il s'exécutait à nouveau après chaque rendu, récupérant à nouveau les données, mettant à jour l'état, provoquant un autre rendu, et ainsi de suite, à l'infini.

La leçon : Les hooks de React comme useEffect sont des outils puissants mais précis. Vous devez fournir un « tableau de dépendances » pour dire à React quand ré-exécuter l'effet. L'omettre signifie « exécute après chaque rendu sans exception », ce qui est la recette d'un désastre avec les mises à jour d'état.

Erreurs et pièges courants

Modifier l'état (state) directement. Ne faites jamais myState.prop = 'value' ou myArray.push('item'). La détection de changement de React repose sur l'identité des objets et des tableaux. Quand vous appelez setState, vous devez fournir un nouvel objet ou un nouveau tableau (par exemple, en utilisant la syntaxe du spread ...) pour que React remarque le changement.
Oublier les keys dans les listes. Quand vous affichez une liste d'éléments en utilisant .map(), vous devez donner à chaque élément une prop key unique et stable (comme item.id). C'est ainsi que l'algorithme de diffing de React peut suivre efficacement quels éléments ont été déplacés, ajoutés ou supprimés. Utiliser l'index du tableau comme key est un anti-pattern courant qui peut conduire à des bugs.
Traiter le JSX comme de l'HTML. C'est proche, mais pas identique. Vous devez utiliser className au lieu de class, htmlFor au lieu de for, et le camelCase pour les propriétés de style (backgroundColor et non background-color). De plus, toutes les balises doivent être fermées, donc une image est <img ... />, pas <img>.
Penser que les hooks sont magiques. Les hooks comme useState et useEffect suivent des règles strictes (par exemple, ils ne peuvent être appelés qu'au niveau supérieur d'un composant fonction). Ils fonctionnent en s'appuyant sur un ordre d'appel constant entre les rendus. Essayer de les appeler à l'intérieur de boucles ou de conditions cassera votre application.

Pourquoi ça devrait être sur votre radar

React n'est pas seulement une librairie ; c'est un écosystème et une façon de penser. Il fait tourner une part énorme du web moderne, des sites massifs comme Instagram et Netflix à d'innombrables startups et outils internes. Apprendre React, c'est apprendre une architecture à base de composants qui promeut un code réutilisable, testable et maintenable.

Même si vous n'utilisez pas React quotidiennement, comprendre ses principes fondamentaux — l'UI déclarative, la gestion d'état et le VDOM — fera de vous un meilleur développeur. Ces concepts ont influencé presque tous les autres frameworks d'UI modernes, de Vue à Svelte. De plus, avec React Native, les mêmes compétences et principes peuvent être utilisés pour construire des applications mobiles natives pour iOS et Android. C'est un paradigme puissant qui est essentiel pour tout développeur travaillant sur des interfaces utilisateur aujourd'hui.

Pour aller plus loin

Docs de React (Officiel) - La documentation officielle est le meilleur point de départ, avec un tutoriel complet et des explications approfondies.
Introduction à JSX (Docs de React) - L'explication officielle du JSX et de ses différences avec l'HTML.
La réconciliation (Docs de React) - L'algorithme que React utilise pour comparer deux arbres VDOM et mettre à jour l'UI efficacement.
Les règles des Hooks (Docs de React) - Les règles essentielles à suivre lors de l'utilisation de hooks comme useState et useEffect.
MDN : Introduction au DOM - Pour comprendre ce que React manipule, il est vital de comprendre le Document Object Model lui-même.

Comment un éditeur comprend le code

Les couleurs viennent d’un analyseur de langage, pas de l’exécution du programme. CodeMirror et Lezer reconnaissent les symboles et la structure dans le navigateur. Les suggestions combinent mots-clés, noms locaux lorsque disponibles, extraits et une petite référence intégrée ; survoler un symbole documenté révèle sa signature. Une suggestion ne garantit pas que cette API existe dans le moteur. Les diagnostics repèrent la syntaxe incorrecte lorsque l’analyseur le permet, sans remplacer le contrôle des types ni l’exécution : une syntaxe valide peut encore échouer. Ruby et Lua utilisent des modes fondés sur les tokens, aux diagnostics plus limités. Aucun serveur de langage distant : le code reste sur l’appareil.

CodeMirror & Lezer: MIT.