Garder les composants purs

Certaines fonctions JavaScript sontpures.Les fonctions pures se contentent d’effectuer un calcul, rien de plus. En écrivant strictement vos composants comme des fonctions pures, vous pouvez éviter toute une classe de bugs déroutants et de comportements imprévisibles à mesure que votre base de code grandit. Pour bénéficier de ces avantages, vous devez toutefois respecter quelques règles.

Pureté : les composants comme des formules

En informatique (et particulièrement dans le monde de la programmation fonctionnelle),une fonction pureest une fonction qui présente les caractéristiques suivantes :

• Elle s’occupe de ses affaires.Elle ne modifie aucun objet ou variable qui existait avant son appel.
• Mêmes entrées, mêmes sorties.Pour des entrées identiques, une fonction pure doit toujours retourner le même résultat.

Vous connaissez peut-être déjà un exemple de fonctions pures : les formules mathématiques.

Prenons cette formule mathématique :y= 2x.

Six= 2alorsy= 4. Toujours.

Six= 3alorsy= 6. Toujours.

Six= 3,yne sera pas parfois9ou–1ou2,5selon l’heure de la journée ou l’état du marché boursier.

Siy= 2xetx= 3,yseratoujourségal à6.

Si nous transformions cela en une fonction JavaScript, cela donnerait :

Dans l’exemple ci-dessus,doubleest unefonction pure.Si vous lui passez3, elle retournera6. Toujours.

React est conçu autour de ce concept.React suppose que chaque composant que vous écrivez est une fonction pure.Cela signifie que les composants React que vous écrivez doivent toujours retourner le même JSX pour les mêmes entrées :

Lorsque vous passezdrinkers={2} à Recipe, il retournera un JSX contenant2 cups of water. Toujours.

Si vous passezdrinkers={4}, il retournera un JSX contenant4 cups of water. Toujours.

Exactement comme une formule mathématique.

Vous pouvez voir vos composants comme des recettes : si vous les suivez et n’introduisez pas de nouveaux ingrédients pendant la cuisson, vous obtiendrez le même plat à chaque fois. Ce « plat » est le JSX que le composant sert à React pourl’affichage.

Illustration parRachel Lee Nabors

Effets de bord : conséquences (in)volontaires

Le processus de rendu de React doit toujours être pur. Les composants doivent uniquementretournerleur JSX, et ne pasmodifierdes objets ou variables qui existaient avant le rendu—cela les rendrait impurs !

Voici un composant qui enfreint cette règle :

Ce composant lit et écrit une variableguestdéclarée en dehors de lui. Cela signifie queappeler ce composant plusieurs fois produira du JSX différent !Et qui plus est, sid'autrescomposants lisentguest, ils produiront aussi du JSX différent, selon le moment où ils sont rendus ! Ce n'est pas prévisible.

En revenant à notre formuley= 2x, maintenant même six= 2, nous ne pouvons pas faire confiance au fait quey= 4. Nos tests pourraient échouer, nos utilisateurs seraient déconcertés, des avions tomberaient du ciel — vous voyez comment cela pourrait mener à des bugs déroutants !

Vous pouvez corriger ce composant enpassant guest comme prop à la place:

Maintenant votre composant est pur, car le JSX qu'il retourne ne dépend que de la propguest.

En général, vous ne devriez pas vous attendre à ce que vos composants soient rendus dans un ordre particulier. Peu importe que vous appeliezy= 2xavant ou aprèsy= 5x: les deux formules se résoudront indépendamment l'une de l'autre. De la même manière, chaque composant devrait seulement « penser par lui-même », et ne pas tenter de se coordonner avec ou dépendre d'autres composants pendant le rendu. Le rendu est comme un examen scolaire : chaque composant devrait calculer son JSX tout seul !

Mutation locale : le petit secret de votre composant

Dans l'exemple ci-dessus, le problème était que le composant changeait une variablepréexistantependant le rendu. Cela est souvent appelé une« mutation »pour le faire paraître un peu plus effrayant. Les fonctions pures ne mutent pas les variables en dehors de la portée de la fonction ou les objets qui ont été créés avant l'appel — cela les rendrait impures !

Cependant,il est tout à fait acceptable de modifier des variables et des objets que vous venezjustede créer pendant le rendu.Dans cet exemple, vous créez un tableau[], l'affectez à une variablecups, puispushune douzaine de tasses dedans :

Si la variablecupsou le tableau[]étaient créés en dehors de la fonctionTeaGathering, ce serait un énorme problème ! Vous changeriez un objetpréexistanten y poussant des éléments.

Cependant, c'est acceptable parce que vous les avez crééspendant le même rendu, à l'intérieur deTeaGathering. Aucun code en dehors deTeaGatheringne saura jamais que cela s'est produit. Cela s'appelle une« mutation locale »— c'est comme le petit secret de votre composant.

Où vouspouvezcauser des effets de bord

Bien que la programmation fonctionnelle s'appuie fortement sur la pureté, à un moment donné, quelque part,quelque chosedoit changer. C'est un peu le but de la programmation ! Ces changements — mettre à jour l'écran, démarrer une animation, modifier les données — sont appelésdes effets de bord.Ce sont des choses qui se produisent« sur le côté », pas pendant le rendu.

Dans React,les effets de bord appartiennent généralement à l'intérieur desgestionnaires d'événements.Les gestionnaires d'événements sont des fonctions que React exécute lorsque vous effectuez une action — par exemple, lorsque vous cliquez sur un bouton. Même si les gestionnaires d'événements sont définisà l'intérieurde votre composant, ils ne s'exécutent paspendantle rendu !Donc les gestionnaires d'événements n'ont pas besoin d'être purs.

Si vous avez épuisé toutes les autres options et que vous ne trouvez pas le bon gestionnaire d'événements pour votre effet de bord, vous pouvez toujours l'attacher à votre JSX retourné avec un appeluseEffectdans votre composant. Cela indique à React de l'exécuter plus tard, après le rendu, lorsque les effets de bord sont autorisés.Cependant, cette approche devrait être votre dernier recours.

Dans la mesure du possible, essayez d'exprimer votre logique uniquement avec le rendu. Vous serez surpris de voir jusqu'où cela peut vous mener !

Récapitulatif

• Un composant doit être pur, ce qui signifie :
  • Il s'occupe de ses propres affaires.Il ne doit pas modifier d'objets ou de variables qui existaient avant le rendu.
  • Mêmes entrées, même sortie.Pour les mêmes entrées, un composant doit toujours renvoyer le même JSX.
• Le rendu peut se produire à tout moment, donc les composants ne doivent pas dépendre de la séquence de rendu des autres.
• Vous ne devez pas muter les entrées que vos composants utilisent pour le rendu. Cela inclut les props, l'état et le contexte. Pour mettre à jour l'écran,« définissez » l'étatau lieu de muter des objets préexistants.
• Efforcez-vous d'exprimer la logique de votre composant dans le JSX que vous renvoyez. Lorsque vous avez besoin de « changer des choses », vous voudrez généralement le faire dans un gestionnaire d'événements. En dernier recours, vous pouvez utiliseruseEffect.
• Écrire des fonctions pures demande un peu de pratique, mais cela débloque la puissance du paradigme de React.