Introduction au concept d'état (State)

La Mémoire Interne du Composant

Si les props permettent à un composant de recevoir des informations de l'extérieur (de son parent), l'état (state) lui permet d'avoir sa propre mémoire interne. L'état est un ensemble de données qu'un composant peut conserver et modifier au fil du temps, généralement en réponse à des événements (interactions utilisateur, réponses d'API, passage du temps, etc.).

Pensez à l'état comme aux variables privées d'un composant qui décrivent son état actuel. Par exemple, un composant `Compteur` a besoin de se souvenir du nombre actuel de clics (son état). Un composant `ChampDeTexte` doit se souvenir du texte actuellement saisi par l'utilisateur (son état). Un composant `ToggleButton` doit savoir s'il est actuellement activé ou désactivé (son état).

La caractéristique la plus importante de l'état en React est que tout changement de l'état d'un composant déclenche automatiquement un nouveau rendu de ce composant par React. C'est le mécanisme fondamental qui permet aux interfaces utilisateur de se mettre à jour dynamiquement en réponse aux changements de données.

Distinction Cruciale : State vs Props

Il est primordial de bien distinguer l'état (state) des propriétés (props) :

• Source : Les props sont passées au composant depuis son parent (extérieur). L'état est géré à l'intérieur du composant lui-même.
• Mutability (du point de vue du composant) : Les props sont en lecture seule pour le composant qui les reçoit. Il ne doit jamais les modifier. L'état est conçu pour être modifié par le composant lui-même (en utilisant des mécanismes spécifiques fournis par React, comme `setState` ou la fonction de mise à jour de `useState`).
• Contrôle : Le composant parent contrôle les props de l'enfant. Le composant lui-même contrôle son propre état.

Une bonne analogie est celle d'une fonction : les props sont comme les arguments passés à la fonction lors de son appel, tandis que l'état est comme les variables déclarées à l'intérieur de la fonction pour effectuer ses calculs ou suivre son déroulement.

En règle générale, si une donnée doit être configurée par le parent ou vient de l'extérieur, utilisez une prop. Si une donnée est spécifique au fonctionnement interne du composant et doit changer au fil du temps en réponse à des événements internes ou des interactions, utilisez l'état.

Gestion de l'état : Les outils de React

React ne vous laisse pas simplement déclarer des variables JavaScript classiques pour gérer l'état, car il a besoin d'être informé lorsque l'état change afin de pouvoir déclencher le processus de re-rendu. Pour cela, React fournit des mécanismes spécifiques :

• Pour les composants fonctionnels (approche moderne) : Le Hook `useState`.
• Pour les composants classe (approche historique) : La propriété `this.state` (pour lire) et la méthode `this.setState()` (pour mettre à jour).

Ces outils garantissent que toute modification de l'état est enregistrée par React et que l'interface utilisateur est mise à jour en conséquence. Dans les sections suivantes, nous allons nous plonger dans l'utilisation concrète de `useState`, qui est la méthode standard aujourd'hui.

Conclusion : Le moteur de l'interactivité

L'état est le concept clé qui permet aux composants React de dépasser le simple affichage statique pour devenir des entités dynamiques et interactives. C'est la mémoire interne du composant, lui permettant de suivre les changements et d'y réagir en mettant à jour l'interface utilisateur.

Comprendre la différence fondamentale entre les props (données externes, en lecture seule) et l'état (données internes, modifiables via les mécanismes React) est essentiel pour structurer correctement vos composants et gérer efficacement le flux de données dans votre application.