Mise à Jour de l'État dans React : Gérez Dynamiquement Vos Données

Qu'est-ce que l'État dans React ?

L'état (ou state en anglais) est l'un des concepts fondamentaux de React. Il représente les données dynamiques d'un composant, c'est-à-dire celles qui peuvent changer au cours du temps et influencer directement ce que l'utilisateur voit à l'écran.

Caractéristiques principales de l'état :

• Localisé : Chaque composant a son propre état, indépendant des autres composants.
• Réactif : Lorsque l'état change, React met automatiquement à jour l'interface utilisateur pour refléter ces changements.
• Contrôlé par React : Vous ne devez jamais modifier l'état directement. Au lieu de cela, vous utilisez des fonctions spéciales comme setState() ou les hooks (par exemple, useState).

Pourquoi utiliser l'état ?

L'état est indispensable lorsque vous avez besoin de gérer des données dynamiques dans votre application. Voici quelques exemples concrets :

• Un compteur qui augmente à chaque clic.
• Un formulaire où l'utilisateur entre des données.
• Une liste de tâches qui peut être : ajoutée, supprimée ou modifiée.
• Un thème (clair/sombre) qui peut être choisi par l'utilisateur.

Comment gérer l'état dans React ?

Il existe deux façons principales de gérer l'état dans React : avec des composants fonctionnels (et les hooks) ou avec des composants basés sur des classes.

1. Avec les composants fonctionnels (et useState)

Les hooks ont été introduits dans React 16.8 pour simplifier la gestion de l'état dans les composants fonctionnels. Voici un exemple :

📋 Copier le code

import React, { useState } from 'react';

function Compteur() {
// Initialisation de l'état "compte" avec la valeur 0
const [compte, setCompte] = useState(0);

return (
<div>
	<p>Vous avez cliqué {compte} fois.</p>
	<button onClick={() => setCompte(compte + 1)}>
		Cliquez ici
	</button>
</div>
);
}

export default Compteur;

Explication ligne par ligne :

• const [compte, setCompte] = useState(0); : Initialise l'état compte avec la valeur 0. La fonction setCompte permet de mettre à jour cet état.
• {compte} : Affiche la valeur actuelle de l'état dans le DOM.
• onClick={() => setCompte(compte + 1)} : Met à jour l'état lorsqu'on clique sur le bouton.

2. Avec les composants basés sur des classes

Avant l'introduction des hooks, l'état était géré principalement dans des composants basés sur des classes. Voici un exemple :

📋 Copier le code

class Compteur extends React.Component {
constructor(props) {
super(props);
this.state = { compte: 0 }; // Initialisation de l'état
}

handleClick = () => {
this.setState({ compte: this.state.compte + 1 }); // Mise à jour de l'état
};

render() {
return (
	<div>
		<p>Vous avez cliqué {this.state.compte} fois.</p>
		<button onClick={this.handleClick}>
			Cliquez ici
		</button>
	</div>
);
}
}

export default Compteur;

Explication ligne par ligne :

• this.state = { compte: 0 }; : Initialise l'état compte avec la valeur 0.
• this.setState({ compte: this.state.compte + 1 }); : Met à jour l'état de manière asynchrone.
• {this.state.compte} : Affiche la valeur actuelle de l'état dans le DOM.

Différences entre useState et this.state

Meilleures pratiques pour gérer l'état

• Ne modifiez jamais directement l'état : Utilisez toujours setState() ou les fonctions fournies par les hooks (setCompte, etc.).
• Utilisez des noms explicites pour vos variables d'état : Par exemple, au lieu de const [x, setX] = useState(0);, préférez const [compte, setCompte] = useState(0);.
• Privilégiez les hooks lorsque possible : Les composants fonctionnels sont plus simples et plus faciles à maintenir.

Utilisation de l'Hook useState

L'hook useState est utilisé pour ajouter une état local à un composant fonctionnel. Voici un exemple simple :

📋 Copier le code

import React, { useState } from 'react';

function Compteur() {
// Déclaration de l'état "compte" initialisé à 0
const [compte, setCompte] = useState(0);

return (
<div>
	<p>Vous avez cliqué {compte} fois.</p>
	<button onClick={() => setCompte(compte + 1)}>
		Cliquez ici
	</button>
</div>
);
}

export default Compteur;

Explication du code :

• import React, { useState } : Importe React et l'hook useState.
• const [compte, setCompte] = useState(0) : Initialise l'état "compte" à 0. La fonction setCompte permet de mettre à jour cet état.
• {compte} : Affiche la valeur actuelle de l'état dans le DOM.
• onClick={() => setCompte(compte + 1)} : Met à jour l'état lorsque le bouton est cliqué.

Gestion de l'État dans les Composants Basés sur des Classes

Bien que les hooks soient la méthode moderne pour gérer l'état, il est également possible de l'utiliser dans des composants basés sur des classes. Voici un exemple :

📋 Copier le code

class Compteur extends React.Component {
constructor(props) {
super(props);
this.state = { compte: 0 }; // Initialisation de l'état
}

handleClick = () => {
this.setState({ compte: this.state.compte + 1 }); // Mise à jour de l'état
};

render() {
return (
	<div>
		<p>Vous avez cliqué {this.state.compte} fois.</p>
		<button onClick={this.handleClick}>
			Cliquez ici
		</button>
	</div>
);
}
}

export default Compteur;

Explication du code :

• this.state = { compte: 0 } : Initialise l'état dans le constructeur.
• this.setState() : Met à jour l'état de manière asynchrone.
• {this.state.compte} : Affiche la valeur actuelle de l'état dans le DOM.

Meilleures Pratiques

Pour éviter les erreurs courantes lors de la manipulation de l'état, voici quelques conseils :

• Ne modifiez jamais directement l'état : Utilisez toujours setState ou les fonctions fournies par les hooks.
• Utilisez des noms explicites pour vos variables d'état : Cela améliore la lisibilité de votre code.
• Privilégiez les hooks lorsque possible : Les composants fonctionnels sont plus simples et plus faciles à maintenir.

Conclusion

Vous avez maintenant appris à gérer la mise à jour de l'état dans vos composants React, que ce soit avec les hooks ou avec des composants basés sur des classes. Dans le prochain chapitre, nous explorerons les fonctionnalités ES6 utilisées fréquemment dans React.

Prochain chapitre : React ES6