React est une bibliothèque JavaScript populaire utilisée pour la construction d’interfaces utilisateur. Elle fournit aux développeurs un large éventail d’outils, dont les hooks, pour rendre la construction d’applications plus facile et plus efficace.

L’un des hooks les plus utilisés est useState, qui permet aux développeurs d’ajouter un état aux composants fonctionnels.

Dans cet article, nous allons examiner en profondeur useState, ses utilisations et les meilleures pratiques pour sa mise en œuvre.

Qu’est-ce que le hook useState ?

Avant de nous plonger dans les spécificités de useState, définissons d’abord ce que sont les hooks et en quoi ils diffèrent des composants de classe traditionnels.

Un hook est une fonction qui vous permet d’utiliser l’état et d’autres fonctionnalités React dans des composants fonctionnels.

Contrairement aux composants de classe, les composants fonctionnels n’ont pas de moyen intégré de stocker l’état. Les hooks comme useState résolvent ce problème en vous permettant d’ajouter de l’état aux composants fonctionnels.

Historique du hook useState

Avant l’introduction du hook useState dans React 16.8, les composants fonctionnels n’étaient pas en mesure de conserver leur propre état. Au lieu de cela, les développeurs devaient utiliser des composants de classe ou des bibliothèques de gestion d’état externes comme Redux pour gérer l’état dans leurs applications.

Bien que les composants de classe et les bibliothèques de gestion d’état externes restent des options viables, l’introduction du hook useState a permis aux développeurs d’ajouter plus facilement de l’état à leurs composants fonctionnels et a simplifié l’API React dans son ensemble.

Grâce au hook useState, les développeurs peuvent désormais utiliser des composants fonctionnels pour la plupart des cas d’utilisation, ce qui réduit la quantité de code standard nécessaire et facilite l’évaluation de l’état dans leurs applications.

Composants de la syntaxe useState

Le crochet useState prend une valeur d’état initiale comme argument et renvoie un tableau contenant deux éléments : la valeur d’état actuelle et une fonction qui met à jour la valeur d’état.

Voici la syntaxe :

const [state, setState] = useState(initialState);
  • state : La valeur de l’état actuel.
  • setState : Une fonction qui met à jour la valeur de l’état.
  • initialState : La valeur initiale de la variable d’état déclarée. Cette valeur est facultative. Si aucune valeur n’est fournie (ce qui n’est pas conseillé), elle est automatiquement fixée à undefined.

Il est important de noter que lorsque vous utilisez le hook useState, React va automatiquement re-rendre votre composant à chaque fois que la valeur de l’état change.

Comment utiliser le hook useState

Pour mettre en œuvre useState, appelez la fonction et passez une valeur initiale en tant qu’argument. La fonction renvoie un tableau contenant la valeur de l’état actuel et une fonction pour mettre à jour l’état.

Voici un exemple d’utilisation de useState pour gérer un simple compteur :

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Dans cet exemple, nous initialisons l’état de count à 0 à l’aide du hook useState. Nous affichons ensuite la valeur actuelle du compteur et un bouton. Lorsque vous cliquez sur le bouton, la valeur du compteur est incrémentée car nous avons ajouté une fonction de flèche à la fonction setCount.

<button onClick={() => setCount(count + 1)}>Click me</button>

Lorsque vous utilisez le hook useState, il est important de ne pas oublier de l’importer depuis la bibliothèque React. Si vous oubliez de l’importer, vous rencontrerez probablement des erreurs lorsque vous tenterez d’utiliser le Hook. Voici comment importer useState :

import { useState } from 'react';

En incluant useState dans l’instruction d’importation, vous indiquez à React que vous souhaitez utiliser le hook useState dans votre composant.

Utilisation de différents types de données avec le hook useState dans React

Le hook useState de React n’est pas limité à la gestion de types de données numériques ou de chaînes de caractères. Vous pouvez également l’utiliser pour gérer les états de différents types de données, tels que les tableaux, les objets et les booléens.

Utilisation de tableaux avec le hook useState

Vous pouvez utiliser le hook useState pour gérer un tableau dans React. Par exemple, si vous avez un tableau de fruits, vous pouvez initialiser votre état avec le tableau :

import { useState } from 'react';

function App() {
  const [list, setList] = useState(['apple', 'banana', 'orange']);

  const addToList = () => {
    const newItem = 'grape';
    setList([...list, newItem]);
  };

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addToList}>Add Item</button>
    </div>
  );
}

export default App;

Dans cet exemple, nous utilisons useState pour gérer un tableau nommé list. L’état initial de list est un tableau contenant trois éléments – apple, banana et orange.

Nous avons également créé une fonction addToList qui copie tous les éléments du tableau à l’aide de l’opérateur de propagation (...), puis ajoute un nouvel élément, le grape, au tableau list chaque fois que l’on clique sur le bouton « Add item ».

Cette fois, nous ne mettons pas à jour l’état en ligne à l’aide d’une fonction arrow, car il est plus approprié de créer cette opération en tant que fonction autonome et de l’appeler par le biais de la méthode onClick ajoutée au bouton Add Item.

Utilisation d’objets avec le hook useState

Vous pouvez également utiliser le hook useState pour gérer un objet dans React. Voici un exemple :

import { useState } from 'react';

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    setUser({ ...user, age: user.age + 1 });
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={handleClick}>Increase Age</button>
    </div>
  );
}

export default App;

Dans cet exemple, nous utilisons useState pour gérer un objet nommé user. L’état initial de user est défini comme un objet contenant deux propriétés – name et age.

Nous disposons également d’une fonction handleClick qui copie toutes les données de l’objet à l’aide de l’opérateur d’étalement (...) et qui augmente l’âge de l’utilisateur de 1 chaque fois que l’on clique sur le bouton Increase age.

Il est important de savoir que vous pouvez assigner cet objet à une variable et initialiser cette dernière. C’est utile lorsque vous avez un objet ou un tableau de grande taille et que vous souhaitez écrire un code facile à comprendre :

import { useState } from 'react';
// Declare data
let userData = {
    name: 'John',
    age: 30,
};

function App() {
    const [user, setUser] = useState(userData);

    const handleClick = () => {
        setUser({ ...user, age: user.age + 1 });
    };

    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={handleClick}>Increase Age</button>
        </div>
    );
}

export default App;

Utilisation de booléens avec le hook useState

Vous pouvez également utiliser le crochet useState pour gérer une valeur booléenne dans React. Voici un exemple :

import { useState } from 'react';

function App() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
      <button onClick={toggleSwitch}>Toggle Switch</button>
    </div>
  );
}

export default App;

Dans cet exemple, nous utilisons useState pour gérer une valeur booléenne nommée isOn. L’état initial de isOn est fixé à false. Nous avons également une fonction toggleSwitch qui fait basculer la valeur de isOn chaque fois que le bouton Toggle Switch est cliqué.

Cette fonction peut être utilisée pour gérer le basculement des modes sombre et lumineux dans vos projets.

Avant de terminer, explorons une utilisation plus avancée du hook useState avec les formulaires.

Le hook useState et les formulaires

Pour gérer les données des formulaires et les entrées des utilisateurs dans React, vous utilisez state. Celui-ci est utilisé pour garder une trace des valeurs actuelles des éléments du formulaire. Il garde la trace de toutes les interactions de l’utilisateur, comme la saisie d’un texte ou la sélection d’une option dans une liste déroulante, et met finalement à jour l’état avec la nouvelle valeur.

Voici un exemple d’utilisation de useState pour créer un formulaire simple :

import { useState } from 'react';

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

function Form() {
    const [formData, setFormData] = useState(formStateData);

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleInputChange}
            />
            <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleInputChange}
            />
            <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

Dans cet exemple, nous créons d’abord un objet pour les données qui seront collectées avec le formulaire, avec des valeurs par défaut pour les champs FirstName, name et email. Nous initialisons ensuite l’état formData à l’aide de useState.

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

const [formData, setFormData] = useState(formStateData);

Nous définissons ensuite une fonction handleInputChange qui met à jour l’état formData chaque fois qu’un champ du formulaire est modifié.

const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
};

Enfin, nous définissons une fonction handleSubmit qui enregistre les données actuelles du formulaire dans la console lorsque le formulaire est soumis.

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
};

Meilleures pratiques useState

Lorsque vous utilisez le hook useState, il est important de suivre les meilleures pratiques afin d’éviter les erreurs courantes et de garantir des performances optimales. Voici quelques conseils à garder à l’esprit :

  • Évitez les états profondément imbriqués : Au lieu de stocker des données d’état complexes dans un seul objet, envisagez de les diviser en petits morceaux pour en faciliter la gestion.
  • Utilisez des mises à jour fonctionnelles : Lorsque vous mettez à jour un état sur la base d’un état précédent, utilisez des mises à jour fonctionnelles pour éviter les conditions de course et vous assurer que l’état correct est mis à jour.
  • Évitez les mises à jour d’état excessives : La mise à jour de l’état peut être coûteuse, essayez donc de minimiser le nombre de mises à jour que vous effectuez. Envisagez d’utiliser la fonction du hook useEffect pour regrouper les mises à jour et optimiser les performances.
  • Évitez les re-renders inutiles : React rendra à nouveau un composant chaque fois que son état ou ses accessoires changent. Pour éviter les rendus inutiles, utilisez la fonction memo.

Résumé

Dans cet article, nous avons exploré en profondeur le hook useState et appris à l’utiliser pour ajouter un état aux composants fonctionnels. Nous avons également abordé l’utilisation de useState avec des formulaires, des tableaux et des objets, ainsi que les meilleures pratiques pour des performances optimales. En suivant ces bonnes pratiques, vous pouvez vous assurer que vos applications React sont efficaces, évolutives et faciles à maintenir.

Vous cherchez la solution d’hébergement idéale pour vos applications React ? Essayez gratuitement l’hébergement d’applications de Kinsta !