useState : Gérez Dynamiquement l'État Local

Comment Utiliser useState ?

Voici un exemple corrigé où nous utilisons `useState` pour gérer un champ de saisie interactif. Notez que nous devons importer `ReactDOM` pour rendre notre composant dans le DOM.

📋 Copier le code

import React, { useState } from 'react';
import ReactDOM from 'react-dom'; // Importation de ReactDOM pour le rendu

function SaisieTexte() {
const [texte, setTexte] = useState(''); // Initialisation de l'état "texte" avec une chaîne vide

function handleChange(event) {
setTexte(event.target.value); // Met à jour l'état "texte" avec la nouvelle valeur saisie
}

return (
<div className="conteneur">
{/* Champ de saisie lié à l'état "texte" */}
<input 
	type="text" 
	value={texte} 
	onChange={handleChange} 
	placeholder="Entrez du texte..." 
	className="champ-saisie"
/>
{/* Affichage dynamique du texte saisi */}
<p className="texte-affiche">Vous avez écrit : {texte}</p>
</div>
);
}

// Rendu du composant dans le DOM
ReactDOM.render(<SaisieTexte />, document.getElementById('root'));

Explication détaillée ligne par ligne :

1. import React, { useState } from 'react'; :
   • Nous importons React ainsi que le Hook `useState` depuis la bibliothèque React.
   • `useState` permet de gérer l'état local dans un composant fonctionnel.
2. import ReactDOM from 'react-dom'; :
   • Cette ligne importe la bibliothèque `ReactDOM`, qui est utilisée pour intégrer notre composant React dans le DOM réel.
   • `ReactDOM.render()` est une méthode essentielle qui insère notre composant dans un élément HTML spécifique (par exemple, celui ayant l'id `root`).
3. const [texte, setTexte] = useState(''); :
   • Cette ligne initialise une variable d'état appelée `texte` avec une chaîne vide comme valeur initiale.
   • setTexte est une fonction qui permet de mettre à jour cette variable d'état.
4. function handleChange(event) { ... } :
   • Cette fonction est appelée chaque fois que l'utilisateur modifie le contenu du champ de saisie.
   • event.target.value récupère la valeur actuelle saisie par l'utilisateur.
5. <input type="text" value={texte} onChange={handleChange} /> :
   • Ce champ de saisie est lié à l'état `texte` via value={texte}.
   • Lorsque l'utilisateur saisit du texte, l'événement onChange appelle la fonction `handleChange`, qui met à jour l'état `texte`.
6. <p>Vous avez écrit : {texte}</p> :
   • Cet élément affiche dynamiquement le texte saisi par l'utilisateur grâce à l'état `texte`.
7. ReactDOM.render(<SaisieTexte />, document.getElementById('root')); :
   • Cette ligne utilise la méthode ReactDOM.render() pour insérer le composant SaisieTexte dans l'élément HTML ayant l'id root.
   • document.getElementById('root') spécifie l'élément cible dans le DOM.

Amélioration Possible pour React 18 : Utilisation de createRoot

Avec l'arrivée de React 18, la méthode classique ReactDOM.render() a été remplacée par une nouvelle approche basée sur createRoot. Cette amélioration permet de tirer parti des nouvelles fonctionnalités de React 18, telles que le concurrent rendering, tout en rendant le code plus moderne et aligné avec les meilleures pratiques actuelles.

Pourquoi Utiliser createRoot ?

Bien que ReactDOM.render() fonctionne toujours dans React 18, son utilisation est déconseillée pour les nouveaux projets car elle n'exploite pas pleinement les capacités du concurrent mode. Voici quelques avantages de createRoot :

• Concurrent Rendering : Permet à React de mieux gérer les mises à jour asynchrones et de prioriser les tâches critiques pour un rendu plus fluide.
• API Plus Moderne : createRoot est conçu pour être utilisé avec React 18 et offre une meilleure compatibilité avec les futures versions.
• Performances Optimisées : Exploite les nouvelles optimisations introduites dans React 18 pour minimiser les re-renders inutiles.

Exemple avec createRoot

Voici comment notre exemple précédent peut être mis à jour pour utiliser createRoot au lieu de ReactDOM.render() :

📋 Copier le code

import React, { useState } from "react";

function SaisieTexte() {
  const [texte, setTexte] = useState("");

  function handleChange(event) {
    setTexte(event.target.value);
  }

  return (
    <div style={{ textAlign: "center", marginTop: "20px" }}>
      <input
        type="text"
        value={texte}
        onChange={handleChange}
        placeholder="Entrez du texte..."
        style={{
          padding: "8px",
          fontSize: "16px",
          borderRadius: "5px",
          border: "1px solid #ccc",
          outline: "none",
        }}
      />
      <p style={{ marginTop: "10px", fontSize: "18px", fontWeight: "bold" }}>
        Vous avez écrit : <span style={{ color: "blue" }}>{texte}</span>
      </p>
    </div>
  );
}

export default SaisieTexte; // 🔹 Exportation du composant

Explication détaillée d'un composant React avec useState

1️⃣ Importation des modules React et useState

import React, { useState } from "react";

Cette ligne importe la bibliothèque React et le hook useState pour gérer l'état local.

2️⃣ Définition du composant SaisieTexte

function SaisieTexte() {

Déclaration du composant fonctionnel SaisieTexte.

3️⃣ Déclaration de l’état local avec useState

const [texte, setTexte] = useState("");

Création d'un état texte initialisé à une chaîne vide. setTexte est utilisé pour mettre à jour texte.

4️⃣ Définition de la fonction handleChange

function handleChange(event) {
setTexte(event.target.value);
}

Cette fonction est déclenchée lors d'une saisie utilisateur dans l’input. Elle met à jour texte avec la valeur actuelle de l’input.

5️⃣ Rendu du composant

return (
<div style={{ textAlign: "center", marginTop: "20px" }}>

Le composant retourne une <div> centrée contenant l’input et le texte saisi.

6️⃣ Champ de saisie (<input>)

<input
type="text"
value={texte}
onChange={handleChange}
placeholder="Entrez du texte..."
/>

L’input est lié à texte et met à jour l’état avec handleChange à chaque modification.

7️⃣ Affichage du texte saisi

<p>Vous avez écrit : <span style={{ color: "blue" }}>{texte}</span></p>

Affiche dynamiquement la valeur de texte en bleu.

8️⃣ Exportation du composant

export default SaisieTexte;

Permet d'utiliser ce composant dans d'autres fichiers React.

📌 Résumé du fonctionnement

• Le composant SaisieTexte contient un champ de texte et affiche son contenu en temps réel.
• useState gère l’état local.
• La fonction handleChange met à jour l'état à chaque saisie.

✅ Résultat visuel

Avant de taper :

[ Entrez du texte... ]

Pendant la saisie de "Bonjour" :

[ Bonjour ]

Affichage :

Vous avez écrit : Bonjour

🚀 Conclusion

Ce composant React est un excellent exemple d'interaction en temps réel avec useState. Il peut être utilisé pour des formulaires, des recherches dynamiques, et bien plus !

Différence entre ReactDOM.render() et createRoot

Voici les principales différences entre ces deux approches :

ReactDOM.render(<Composant />, document.getElementById('root'));
	

const root = createRoot(document.getElementById('root'));
root.render(<Composant />);
	

Pourquoi Passer à createRoot ?

Si vous travaillez avec React 18 ou une version ultérieure, il est fortement recommandé de passer à createRoot pour plusieurs raisons :

• Compatibilité Future : createRoot est conçu pour être aligné avec les futures évolutions de React.
• Performances : Il exploite les optimisations internes de React 18, notamment le concurrent rendering.
• Meilleures Pratiques : Utiliser la méthode recommandée garantit que votre code est moderne et maintenable.

Transition vers React 18

Pour migrer votre projet existant vers React 18 et utiliser createRoot, suivez ces étapes :

1. Vérifiez votre version de React : Assurez-vous que votre projet utilise React 18 ou une version ultérieure. Vous pouvez vérifier cela dans votre fichier package.json ou via la commande suivante dans votre terminal :

   npm list react
   

2. Remplacez ReactDOM.render() par createRoot : Modifiez simplement votre fichier principal (ex. index.js) pour utiliser createRoot comme illustré dans l'exemple ci-dessus.
3. Testez votre application : Lancez votre application avec npm start pour vérifier que tout fonctionne correctement avec la nouvelle méthode.

Conclusion

En passant à createRoot dans React 18, vous bénéficiez d'une API plus moderne et de meilleures performances grâce au concurrent rendering. Cela garantit que votre code reste à jour avec les dernières pratiques recommandées par la communauté React.

Conclusion

Vous avez maintenant appris à utiliser `useState` pour gérer l'état local dans vos composants fonctionnels React. Grâce à cet Hook, vous pouvez rendre vos applications interactives sans avoir besoin de recourir aux composants basés sur des classes.

Prochain chapitre : useEffect