Mesurer les éléments du DOM avec useLayoutEffect

element.getBoundingClientRect() renvoie un objet DOMRect contenant la taille et la position de l’élément par rapport à la zone d’affichage : top, right, bottom, left, width et height. Cette méthode force le navigateur à effectuer un calcul de mise en page pour renvoyer des valeurs exactes : appelez-la donc avec parcimonie.

Si vous lisez getBoundingClientRect() dans un useEffect, le navigateur a déjà effectué la peinture. Si vous mettez ensuite à jour l’état à partir de la mesure, React effectue un nouveau rendu et le navigateur peint à nouveau. Les utilisateurs peuvent voir brièvement l’élément dans une position ou une taille incorrecte avant l’affichage de la correction lors de la seconde peinture.

La lecture des mesures dans useLayoutEffect s’effectue après les mutations du DOM, mais avant la peinture. Toute mise à jour d’état déclenchée par la mesure amène React à effectuer un nouveau rendu synchrone et à valider le DOM corrigé, le tout avant que le navigateur n’ait rien peint. L’utilisateur ne voit que le résultat final correct, au cours d’un seul cycle de peinture.

Une info-bulle doit apparaître près de son élément déclencheur. Mesurez la position de l’élément déclencheur dans useLayoutEffect à l’aide de getBoundingClientRect(), calculez la position absolue de l’info-bulle et enregistrez cette position dans l’état. L’info-bulle s’affiche au bon endroit dès la toute première peinture, sans saut visible depuis une position initiale incorrecte.

Pour animer un élément depuis sa taille naturelle, sans contrainte, jusqu’à une taille fixe, vous devez connaître sa taille naturelle avant d’appliquer la contrainte. Lisez la hauteur de l’élément dans useLayoutEffect avant l’application de tout style d’animation, stockez-la dans l’état, puis utilisez-la comme valeur d’image clé de départ pour votre transition CSS.

Lorsqu’une page possède un en-tête fixe, le contenu principal doit avoir une marge intérieure supérieure égale à la hauteur de l’en-tête afin de ne pas être masqué derrière celui-ci. Mesurez la hauteur de l’en-tête dans useLayoutEffect à l’aide d’une référence : headerRef.current.getBoundingClientRect().height. Définissez cette valeur comme paddingTop sur le conteneur de contenu. La mise en page est correcte dès le premier rendu.

Lorsque vous appelez setState dans useLayoutEffect, React exécute immédiatement un autre cycle de rendu et de validation dans le même bloc synchrone. Ce nouveau rendu exécute également son useLayoutEffect. Veillez à ne pas créer de boucle infinie : ne mettez à jour l’état que si la nouvelle mesure diffère de la valeur actuelle de l’état.

Sur le serveur, les éléments du DOM n’existent pas : getBoundingClientRect() provoquerait une erreur ou renverrait des zéros. Protégez votre useLayoutEffect avec une vérification : if (typeof window === 'undefined') return;. Pour les applications SSR, vous devrez peut-être hydrater la page avec une taille d’espace réservé, puis mesurer après l’hydratation côté client.

Une mesure ponctuelle avec useLayoutEffect vous donne la taille au moment du montage. Pour suivre les changements de taille lorsque l’élément est redimensionné, à cause d’un redimensionnement de la fenêtre, d’un contenu dynamique ou de modifications CSS, utilisez plutôt ResizeObserver. Il exécute une fonction de rappel chaque fois que la taille de l’élément change, ce qui le rend plus adapté aux composants adaptatifs.

Si plusieurs effets ont besoin de la même mesure, calculez-la une seule fois et partagez-la via un contexte ou en la transmettant sous forme de propriétés. Calculer plusieurs fois la même valeur de getBoundingClientRect() dans plusieurs appels à useLayoutEffect déclenche plusieurs lectures synchrones de la mise en page, chacune étant relativement coûteuse. Regroupez les mesures lorsque c’est possible.

Les références sont renseignées avant l’exécution des effets. Lorsque useLayoutEffect s’exécute, il est garanti que ref.current pointe vers l’élément du DOM. C’est pourquoi ce modèle fonctionne : useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). La référence n’est jamais nulle dans un effet de mise en page d’un composant monté.

Pourquoi vaut-il mieux appeler getBoundingClientRect() dans useLayoutEffect plutôt que dans useEffect ?

Utilisez getBoundingClientRect() dans useLayoutEffect pour lire les mesures du DOM après les mutations, mais avant la peinture. Les mises à jour d’état issues de ces mesures provoquent un nouveau rendu synchrone inclus dans le même cycle de peinture, ce qui empêche les clignotements. Protégez le code contre SSR avec une vérification typeof window. Pour suivre continuellement la taille, préférez ResizeObserver.