Comprendre le processus de rendu et de réconciliation de React

Le cycle de vie du rendu : Quand et pourquoi react met à jour l'UI ?

Pour optimiser les performances de rendu, il est fondamental de comprendre d'abord comment React décide de mettre à jour l'interface utilisateur. Le terme "rendu" (render) dans React fait référence au processus par lequel React demande à vos composants de décrire à quoi devrait ressembler l'interface utilisateur à un instant T, en se basant sur les props et l'état actuels.

Un rendu est déclenché dans plusieurs situations :

• Rendu initial : Lorsque l'application est chargée pour la première fois (par exemple via `ReactDOM.createRoot(rootElement).render()`).
• Mise à jour de l'état : Lorsqu'un composant (ou un de ses ancêtres) appelle une fonction de mise à jour d'état (la fonction retournée par `useState` ou `useReducer`).
• Changement de props : Lorsqu'un composant parent se re-rend et passe de nouvelles références de props (même si les valeurs sous-jacentes sont identiques !) à un composant enfant. Par défaut, un re-rendu du parent entraîne un re-rendu de ses enfants.
• Changement de contexte : Lorsqu'un composant est abonné à un Contexte React (`useContext`) et que la valeur de ce contexte change.

Il est crucial de noter qu'un "rendu" ne signifie pas nécessairement une modification du DOM réel. Le rendu est l'étape où React exécute le code de vos composants (fonctions ou méthode `render` des classes) pour obtenir une description de l'UI souhaitée. Ce qui se passe ensuite est le processus de réconciliation.

Le DOM Virtuel (Virtual DOM) : Une représentation en mémoire

Manipuler directement le DOM (Document Object Model) du navigateur est une opération coûteuse en termes de performance. React introduit une abstraction pour minimiser ces manipulations directes : le DOM Virtuel (Virtual DOM ou VDOM).

Le VDOM est une représentation légère de la structure de l'interface utilisateur, conservée en mémoire sous forme d'objets JavaScript. Il imite la structure du DOM réel mais sans être directement lié au rendu dans le navigateur. Travailler avec ces objets JavaScript est beaucoup plus rapide que d'interagir avec les API du DOM.

Lorsqu'un rendu est déclenché (par exemple, suite à une mise à jour d'état), React ne modifie pas immédiatement le DOM réel. Au lieu de cela, il crée une nouvelle arborescence du VDOM décrivant à quoi l'interface devrait ressembler après la mise à jour.

La réconciliation et l'algorithme de "Diffing"

C'est là qu'intervient le coeur de l'optimisation de React : la réconciliation. Une fois que React dispose de la nouvelle arborescence VDOM issue du dernier rendu, il la compare avec l'arborescence VDOM précédente (celle qui correspond à l'état actuel du DOM réel).

Ce processus de comparaison est appelé "diffing". React utilise un algorithme heuristique efficace pour identifier les différences (le "diff") entre les deux arbres VDOM. Cet algorithme repose sur quelques hypothèses clés pour rester performant :

• Deux éléments de types différents produiront des arbres différents : Si la racine d'une sous-arborescence change de type (par exemple, un `
  ` devient un `

  `), React détruira l'ancien arbre et construira le nouveau à partir de zéro.
• Le développeur peut indiquer des éléments stables avec la prop `key` : Lors de la comparaison de listes d'éléments enfants (par exemple, des `
• ` générés par un `map`), React utilise les `key` pour faire correspondre les éléments entre les deux arbres. Si les clés sont stables et uniques, React peut efficacement identifier les éléments qui ont été ajoutés, supprimés ou simplement déplacés, minimisant ainsi les opérations. L'absence de clés ou l'utilisation d'index comme clés peut entraîner des comparaisons inefficaces et des bugs potentiels.
• Pour les éléments du même type, comparer les attributs/props : Si deux éléments sont du même type, React compare leurs attributs (ou props) et ne met à jour que ceux qui ont changé dans le DOM réel.

L'objectif de cet algorithme de diffing est de calculer le minimum d'opérations nécessaires pour transformer l'ancien état de l'UI en nouvel état.

Mise à jour du DOM réel : L'étape finale

Une fois que l'algorithme de diffing a identifié les différences entre l'ancien et le nouveau VDOM, React traduit ces différences en opérations concrètes sur le DOM réel.

Ces opérations sont optimisées et souvent groupées (batching) pour minimiser le nombre de manipulations directes du DOM, qui sont, comme mentionné, coûteuses. Par exemple, si plusieurs attributs d'un même noeud doivent changer, React tentera de les appliquer en une seule fois.

Comprendre ce processus en trois étapes (Rendu -> Réconciliation/Diffing -> Mise à jour du DOM) est crucial pour l'optimisation. Notre objectif sera souvent d'éviter les étapes inutiles. Si un composant se re-rend (`Render`) mais que la réconciliation (`Diffing`) détermine qu'aucune modification n'est nécessaire pour sa partie du DOM, alors aucune mise à jour du DOM réel n'aura lieu pour ce composant. Cependant, le rendu lui-même a consommé du temps et des ressources. Les techniques d'optimisation comme `React.memo`, `useMemo`, et `useCallback` visent principalement à éviter des rendus inutiles, court-circuitant ainsi potentiellement les étapes de réconciliation et de mise à jour du DOM si le résultat du rendu n'a pas changé.