Tout savoir sur les renders en React en seulement 5 minutes et en français c'est parti ! Les renders, le mot render, qu'est-ce que ça veut dire en fait ? En React, tout est component. On peut donc voir React comme une sorte d'arbre de composants qui s'imbriquent ensemble. Ce React Tree doit être donné à notre navigateur Chrome.
Pour ça, React va venir render notre React Tree, donc notre arbre React, afin d'avoir une sorte de... d'objet JavaScript qui représente notre DOM à un instant T. Cet objet JavaScript il s'écrit à peu près comme ceci et il va être très gros vu qu'il va contenir tous les éléments de notre arbre. Ensuite cet objet va être passé à React DOM qui va venir mettre à jour Chrome en fonction de cet objet.
Un render, qu'est ce que c'est ? C'est donc l'exécution de notre component, c'est pour ça que quand on met un console.log à l'intérieur, eh bah, il s'exécute à chaque render. c'est le fait de récupérer l'output et de le donner à React DOM. Un render n'est pas forcément global.
Un render peut se produire de manière locale et va venir uniquement affecter une partie de l'application ou même affecter uniquement un seul et unique component. Et donc, qu'est-ce que c'est un trigger ? Qu'est-ce qui devient trigger, c'est render.
Eh bien, il y a trois triggers. Le premier, c'est quand le parent render. À partir du moment où le parent render, tous les enfants... sans exception vont render.
Qu'il y ait des props ou pas. Attention à quand même noter que le parent, ici, c'est app qui render parent et children, alors que parent ne render pas children, il vient juste le raper dans le DOM. Donc ici, quand le parent render, qu'il y ait bien app, children varie render.
Que les props changent ou pas, ça n'a aucun impact. Dans tous les cas, dès que le parent render, tous les enfants render, sauf exception. Deuxième cas, c'est quand un state change. Donc on a par exemple ici un parent qui contient un state, cette state. À partir du moment où le state est update, le parent et donc le component va render.
Par effet boule de neige, souvent tous les enfants vont à leur tour render. Donc quand un state change, tu vas avoir tous les enfants qui vont render parce que le parent a render. Et donc là on additionne les deux règles qu'on a vu ensemble.
Troisième règle, c'est quand la valeur d'un contexte change. Alors dans un contexte, on passe une value comme tu peux le voir juste ici et à l'instant où cette value va changer, ou plutôt quand le state va être mis à jour parce que c'est toujours là que ça vient, et bien la valeur va changer du contexte et à ce moment-là, tous les consumers, donc tous les hooks qui utilisent useContext vont à leur tour render. Donc comment est-ce qu'on fait pour prévenir ces fameux renders ? C'est la dernière étape de notre vidéo.
Pour prévenir les renders, on peut utiliser la méthode memo. La méthode memo, elle vient wrapper un childrun, comme ceci, en venant passer en paramètre un childrun, elle vient créer ce qu'on appelle un pure component. Ce pure component va faire en sorte que quand le parent render, l'enfant ne re-render pas, parce que la règle quand un parent rend, l'enfant aussi ne s'applique plus, parce que cette fois, c'est uniquement lorsque les props changent que celui-ci est rendu. Donc si on a un state qui s'update, mais qu'ici ce state est passé en paramètre à notre child via la props value, à ce moment-là, le parent va render, mais le childrun va aussi render parce que la valeur du state a quant à elle aussi changé. Le deuxième moyen d'éviter les renders, c'est d'utiliser le childrun pattern.
Tu vois que ici, ce que je fais, ici j'ai app qui render parent et child, et le state, au lieu de le mettre dans app à l'intérieur ici, je l'ai mis dans le parent. Et donc, malgré que Children est un enfant de parent visuellement, en vrai, le vrai parent de Children, c'est App. Et donc ici, en utilisant ce qu'on appelle le Children pattern, et bien quand le parent va, quand le state va s'update, le parent va render, mais il ne va pas render le child, mais il ne va pas render le child. Pourquoi ?
Parce que ce n'est pas le parent direct de child et que c'est App ici qui joue ce rôle. Si tu as envie de pratiquer et de comprendre tout ce que je t'ai dit de manière beaucoup plus concrète avec des exercices sur pas mal de sujets, recréation d'un mini React, le JSX, React sans React, je t'invite à aller sur mlv.sh.react. C'est le premier lien dans la description et je suis sûr que tu vas kiffer cette plateforme interactive.
Voici pour cette vidéo. Si tu as aimé cette série de 5 minutes, n'hésite pas à mettre un énorme like, à t'abonner à cette chaîne YouTube et de regarder ma prochaine vidéo. sur en cinq minutes tu peux la retrouver juste ici j'ai une série de plein de vidéos qui va t'apprendre j'en suis sûr plein de choses on se dit à très bientôt ciao