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.
- Les arguments des Hooks et leurs valeurs renvoyées sont immuables – Une fois que des valeurs sont passées à un Hook, vous ne devriez jamais les modifier. Tout comme les props en JSX, ces valeurs deviennent immuables une fois passées à un Hook.
- Les valeurs sont immuables une fois passées à JSX – Ne modifiez pas des valeurs une fois que vous les avez utilisées dans du JSX. Déplacez la mutation en amont, avant que le JSX soit créé.
React appelle les composants et les Hooks
React s’occupe de réaliser le rendu des composants et des Hooks lorsque c’est nécessaire, afin d’optimiser l’expérience utilisateur. C’est une approche déclarative : vous dites à React quel rendu effectuer dans la logique de votre composant, et React déterminera comment réaliser au mieux l’affichage pour l’utilisateur.
- N’appelez jamais les fonctions composants directement – Les composants ne devraient être utilisés que dans du JSX. Ne les appelez pas en tant que fonctions classiques.
- Ne passez jamais des Hooks comme des valeurs classiques – Les Hooks ne devraient être appelés qu’au sein de composants. Ne les passez pas comme des valeurs classiques.
Les règles des Hooks
Les Hooks sont définis au moyen de fonctions JavaScript, mais représentent un type spécifique de logique d’UI réutilisable, avec des restrictions sur leurs emplacements d’appel. Vous devez suivre les Règles des Hooks lorsque vous les employez.
- N’appelez des Hooks qu’au niveau racine – Ne les appelez pas dans des boucles, des conditions ou des fonctions imbriquées. Utilisez plutôt toujours les Hooks au niveau racine de votre fonction React, avant d’éventuels retours anticipés.
- N’appelez les Hooks que depuis des fonctions React – N’appelez pas les Hooks depuis des fonctions JavaScript classiques.