Éviter les recalculs de mise en page et les scintillements

Les saccades de mise en page se produisent lorsque JavaScript alterne entre la lecture des propriétés du DOM et l’écriture dans le DOM au sein d’une boucle. Chaque lecture effectuée après une écriture force le navigateur à recalculer la mise en page de manière synchrone afin de renvoyer une valeur exacte. Cela peut transformer un calcul de mise en page qui devrait être unique en des dizaines de calculs, ce qui nuit fortement aux performances.

React regroupe tous les appels à setState effectués dans les gestionnaires d’événements et les effets en un seul nouveau rendu. Ce regroupement naturel évite le schéma lecture-écriture-lecture qui provoque les saccades au cours d’un même cycle de rendu. Dans React 18, le regroupement s’étend également aux fonctions de rappel asynchrones et aux promesses, ce qui réduit les saccades de mise en page liées aux mises à jour d’état concurrentes.

Le scintillement se produit lorsqu’un useEffect lit le DOM, met à jour l’état, déclenche un nouveau rendu, puis que le navigateur effectue deux affichages : un avec l’état initial, l’autre avec l’état corrigé. Le premier affichage apparaît brièvement avant d’être remplacé. Ce phénomène est particulièrement visible avec les effets qui ajustent des propriétés de mise en page comme la hauteur, la largeur ou la position.

Ouvrez Chrome DevTools, accédez à l’onglet Rendu (via le menu à trois points, sous Plus d’outils), puis activez « Visualisation des peintures ». Les zones redessinées sont surlignées en vert. Si vous voyez un composant scintiller lors du premier rendu, puis être immédiatement redessiné avec une mise en page différente, cela confirme un double affichage provoqué par une mise à jour d’état pilotée par useEffect.

Déplacez les lectures du DOM et les mises à jour d’état qui en résultent de useEffect vers useLayoutEffect. La même mesure et la même mise à jour d’état s’effectuent alors de manière synchrone avant l’affichage, React effectue le nouveau rendu et valide les changements dans le même bloc, et le navigateur n’affiche que l’état final correct. Le clignotement vert dans DevTools disparaît.

Le modèle sans scintillement est le suivant : lire le DOM dans useLayoutEffect, appeler setState avec la mesure, laisser React effectuer un nouveau rendu synchrone, valider le DOM corrigé, puis laisser le navigateur afficher une seule fois le résultat final. Il s’agit du modèle standard pour le positionnement des info-bulles, les décalages des en-têtes fixes et la préparation des animations.

La grande majorité des effets doivent utiliser useEffect : récupération de données (le scintillement pendant le chargement est acceptable et attendu), abonnements à des événements ou à des flux, journalisation et analyse, minuteries, ainsi que tout effet qui n’influence pas immédiatement la mise en page visible. Utiliser excessivement useLayoutEffect alors que useEffect suffirait constitue un anti-modèle qui dégrade les performances.

Réservez useLayoutEffect aux mesures du DOM qui influencent ensuite le rendu visuel : positions des info-bulles, logique fondée sur la taille des éléments, restauration de la position de défilement et préparation d’animations qui lisent les dimensions initiales. Un symptôme clair indiquant qu’il faut changer de hook est l’apparition, pendant une seule image, d’une mise en page incorrecte qui scintille lors du premier rendu.

Les deux hooks ont des signatures identiques : useLayoutEffect(callback, deps) contre useEffect(callback, deps). La seule différence concerne le moment où le rappel est exécuté. Vous pouvez passer de l’un à l’autre en modifiant un seul mot dans le code. Commencez par useEffect et ne passez à useLayoutEffect qu’après avoir confirmé la présence d’un scintillement.

Il est valide et courant d’utiliser les deux hooks dans un même composant pour gérer des préoccupations différentes. Par exemple, un composant de graphique peut utiliser useLayoutEffect pour mesurer la largeur de son conteneur et définir de manière synchrone la viewBox du SVG, puis utiliser useEffect pour récupérer les données du graphique de manière asynchrone. Chaque hook gère la préoccupation pour laquelle le moment d’exécution est important.

En plus de la visualisation des peintures dans DevTools, vous pouvez ajouter un compteur dans la console de votre composant pour compter les rendus. Si un composant journalise « rendu » deux fois lors de son premier montage — une fois avec l’état initial et une fois avec la mesure corrigée — vous êtes face à un scénario de double affichage. Déplacer la mesure vers useLayoutEffect devrait ramener le nombre à un seul rendu journalisé après le montage (sans tenir compte du double rendu du mode strict).

Dans quel scénario est-il justifié d’utiliser useLayoutEffect plutôt que useEffect ?

Le va-et-vient de mise en page provient de l’alternance entre les lectures et les écritures du DOM. Le regroupement de React en empêche la majeure partie pendant les rendus. Le scintillement se produit lorsque useEffect mesure le DOM et met à jour l’état, ce qui entraîne deux affichages. Corrigez le scintillement en déplaçant les mesures du DOM vers useLayoutEffect. Utilisez par défaut useEffect pour tout le reste : récupération de données, abonnements, journalisation et minuteries.