Quand utiliser le state vs les props ?

La dichotomie fondamentale des données dans un composant

Nous avons maintenant exploré les deux principaux moyens par lesquels les données influencent un composant React : les props et l'état (state). Bien qu'ils servent tous deux à rendre les composants dynamiques, ils ont des origines, des objectifs et des règles d'utilisation fondamentalement différents. Savoir quand utiliser l'un ou l'autre est une compétence essentielle pour concevoir des composants React clairs, maintenables et efficaces.

Faire le mauvais choix peut conduire à des composants difficiles à raisonner, à des flux de données complexes ou à des bugs subtils. Cette section vise à clarifier les rôles respectifs du state et des props et à fournir des lignes directrices pour déterminer quelle approche adopter dans différentes situations.

Rappel des définitions et caractéristiques

Récapitulons les caractéristiques clés de chacun :

Props (Propriétés) :

• Source : Reçues du composant parent.
• Objectif : Configurer ou personnaliser le composant enfant depuis l'extérieur. Transmettre des données ou des fonctions du parent à l'enfant.
• Mutability (du point de vue de l'enfant) : Lecture seule (Read-only). Le composant enfant ne doit jamais modifier ses propres props.
• Flux : Descendant (unidirectionnel, parent vers enfant).
• Analogie : Arguments d'une fonction.

State (Etat) :

• Source : Géré à l'intérieur du composant lui-même.
• Objectif : Se souvenir d'informations qui changent au fil du temps au sein du composant (sa mémoire interne), souvent en réponse à des interactions ou des événements.
• Mutability : Modifiable par le composant lui-même, mais uniquement via les mécanismes fournis par React (`setEtat` ou `this.setState`).
• Flux : Local au composant (mais peut être passé en prop à des enfants).
• Analogie : Variables internes d'une fonction.

Les questions clés à se poser

Pour déterminer si une donnée particulière doit être gérée comme une prop ou comme un état dans un composant spécifique, posez-vous les questions suivantes :

1. Cette donnée est-elle fournie ou contrôlée par le composant parent ? Si oui, il s'agit très probablement d'une prop. Le composant enfant ne fait que recevoir et afficher (ou utiliser) cette donnée. Exemple : Le nom d'utilisateur à afficher dans un composant `Greeting`.
2. Cette donnée peut-elle changer au fil du temps au sein de CE composant, suite à une interaction utilisateur ou un événement interne ? Si oui, et si ce changement doit entraîner une mise à jour de l'interface, il s'agit probablement d'un état. Exemple : La valeur actuelle d'un champ de saisie dans un composant `SearchBar`, ou si une case est cochée dans un composant `Checkbox`.
3. Cette donnée peut-elle être calculée à partir d'autres props ou états existants ? Si oui, elle ne devrait probablement pas être dans l'état. Il est préférable de la calculer à la volée pendant le rendu pour éviter la duplication et les problèmes de synchronisation. L'état doit contenir la source minimale de vérité. Exemple : Si vous avez `firstName` et `lastName` en props, calculez `fullName` directement dans le rendu plutôt que de le stocker dans l'état.
4. Cette donnée est-elle nécessaire uniquement pendant le rendu ou aussi entre les rendus ? Si une valeur est uniquement nécessaire pendant un rendu spécifique et n'a pas besoin d'être mémorisée pour les rendus futurs, ce n'est pas un état. Ce pourrait être une variable locale classique dans la fonction composant. L'état sert à conserver des informations *entre* les rendus.

Exemples concrets de décision

• Composant `Avatar` : Doit afficher une image dont l'URL est fournie par le parent. L'URL est une prop (`imageUrl`).
• Composant `Dropdown` : Doit savoir s'il est actuellement ouvert ou fermé. L'utilisateur clique dessus pour l'ouvrir/fermer. Cet état ouvert/fermé est un état local (`isOpen`).
• Composant `Article` : Affiche un titre, un auteur et un contenu passés par le parent. Le titre, l'auteur et le contenu sont des props. Si l'article a un bouton "J'aime" qui change d'apparence et incrémente un compteur local quand on clique dessus, le nombre de "J'aime" et l'état "aimé/non aimé" seraient des états locaux de `Article` (ou potentiellement d'un composant `LikeButton` enfant).
• Composant `FilteredList` : Reçoit une liste complète d'éléments (`items`) en prop et un terme de recherche (`searchTerm`) en prop. Il affiche uniquement les éléments qui correspondent au terme. La liste filtrée ne devrait pas être dans l'état ; elle doit être calculée pendant le rendu en filtrant les `items` (prop) en fonction du `searchTerm` (prop).

Conclusion : Le bon outil pour la bonne donnée

La distinction entre state et props est fondamentale pour concevoir des applications React efficaces. Les props sont utilisées pour la configuration et la communication descendante (parent vers enfant), représentant des données externes et immuables pour l'enfant.

L'état (state) est la mémoire interne et modifiable d'un composant, utilisée pour gérer les données qui changent localement au fil du temps et déclenchent des mises à jour de l'interface. En vous posant les bonnes questions sur l'origine, le contrôle et la nature changeante d'une donnée, vous pourrez choisir judicieusement entre state et props, menant à une architecture de composants plus claire et plus logique.