Les règles de React
Tout comme des langages de programmation distincts ont leurs propres manières d’exprimer des concepts, React a ses propres idiômes — ou règles — pour exprimer certaines approches de façon facile à comprendre, afin de produire des applications de grande qualité.
- Les composants et les Hooks doivent être des fonctions pures
- React appelle les composants et les Hooks
- Les règles des Hooks
Cette section décrit les règles que vous devez suivre pour écrire du code React idiomatique. Écrire du code React idiomatique vous aidera à construire des applications bien organisées, fiables et composables. Ces propriétés améliorent la résilience aux chaangements de votre appli, et facilitent son sa maintenance par d’autres développeur·ses et son intégration avec des bibliothèques et outils tiers.
Ces règles sont connues sous le termes Règles de React. Ce sont bien des règles — et pas juste des recommandations — dans le sens où, si vous les enfreignez, votre appli aura sans doute des bugs. Votre code deviendra non-idiomatique et plus difficile à comprendre et à modéliser mentalement.
Nous vous encourageons fortement à utiliser le mode strict ainsi que le plugin ESLint de React pour vous aider à produire une base de code qui suive les Règles de React. En suivant les Règles de React, vous détecterez et corrigerez ces bugs et obtiendrez une application plus maintenable.
Les composants et les Hooks doivent être des fonctions pures
La pureté des Composants et des Hooks est une règle clé de React qui rend votre appli prévisible, facile à déboguer, et permet à React d’optimiser votre code.
- Les composants doivent être idempotents – Les composants React sont supposés toujours renvoyer le même résultat pour les mêmes entrées – props, états locaux et contextes.
- Les effets de bord doivent être exécutés hors du rendu – Les effets de bord ne doivent pas être exécutés lors du rendu, afin que React puisse effectuer plusieurs fois le rendu de composants afin de créer la meilleure expérience utilisateur.
- Les props et l’état sont immuables – Les props et les états locaux d’un composant sont considérés comme des instantanés immuables au sein d’un même rendu. Ne les modifiez jamais directement.