Qu'est-ce qui provoque vraiment le re-rendu d'un composant React, et pourquoi ce n'est pas la même chose qu'une mise à jour du DOM ?

Un composant se re-rend quand son propre state change, quand un contexte qu'il consomme publie une nouvelle valeur, ou quand son parent se re-rend et produit un nouvel élément pour lui. Le rendu se contente d'appeler la fonction et de produire une description de l'interface. React compare ensuite ça à l'arbre précédent et ne commit que les changements de DOM qui diffèrent, donc la plupart des re-rendus ne touchent aucun DOM.

Trois choses le déclenchent : une mise à jour de state dans le composant, un changement de valeur d'un contexte auquel il est abonné, ou le re-rendu du parent. Ce dernier point surprend, parce qu'un rendu du parent réexécute toutes les fonctions enfants, que leurs props aient changé de valeur ou non. Mais le rendu ne produit qu'un arbre d'éléments. React le réconcilie avec l'arbre précédent et commit l'ensemble minimal de mutations du DOM, donc un re-rendu est souvent bon marché et ne touche aucun DOM. Les cas coûteux, ce sont les gros sous-arbres et les calculs lourds dans le corps du rendu. Quand une page semblait poussive sur un produit sur lequel je travaillais, j'ai ouvert le profiler des React DevTools au lieu de deviner, et le coupable était un seul contexte qui contenait à la fois l'utilisateur courant et une chaîne de recherche en direct, donc chaque frappe re-rendait toute la coquille authentifiée. Découper ça en deux contextes a réglé le problème en une dizaine de lignes. Je ne sors memo que quand le profiler me désigne un sous-arbre précis.