Notes sur le rendu en React

Introduction

• Le mot "render" veut dire exécuter ou afficher un composant en React.
• React est perçu comme un arbre de composants imbriqués.
• Le React Tree est transformé en un objet JavaScript représentant le DOM à un instant donné.

Fonctionnement du Rendu

• Cet objet est ensuite passé à React DOM, qui met à jour le navigateur (Chrome) en conséquence.
• Un rendu est l'exécution d'un composant et se voit à travers les logs.

Rendu Global vs Local

• Un rendu peut affecter l'ensemble de l'application ou seulement un composant spécifique.

Triggers de Rendu

1. Quand le parent rend

• Si un parent rend, tous ses enfants rendent également, peu importe les props.
• Exemple : Le composant App rend ses enfants.

2. Changement d'état (state)

• Lorsqu'un état change dans un parent, cela entraîne le rendu du parent et de tous ses enfants.

3. Changement de valeur d'un contexte

• La mise à jour de la valeur d'un contexte déclenche également le rendu de tous les consumers qui utilisent useContext.

Prévention des Rendus

1. Utilisation de memo

• La méthode memo permet de créer un "pure component".
• Un pure component ne se rendra que si les props changent, même si le parent rend.

2. Enfants dans le Parent (Children Pattern)

• En plaçant le state dans le parent, malgré son apparence d'enfant, le composant enfant ne se rend pas si le parent rend.

Conclusion

• Pour pratiquer et approfondir, rendez-vous sur mlv.sh.react.
• Encouragement à liker, s'abonner et suivre d'autres vidéos.

---