Le crochet useState de React

Les React Hooks ont transformé la façon dont nous construisons et gérons l’état des composants fonctionnels. En extrayant la logique d’un composant, ils nous permettent d’écrire un code plus clair et plus intuitif. Dans cet article, nous aborderons le point le plus fondamental de React : useState.

Les React Hooks ont transformé la façon dont nous construisons et gérons l’état des composants fonctionnels. En extrayant la logique d’un composant, ils nous permettent d’écrire un code plus clair et plus intuitif.

Nous avons exploré les hooks dans des articles précédents en mettant l’accent sur utiliserEffet, utiliserContext et utiliserRéducteur. Aujourd’hui, nous approfondissons le point le plus fondamental de React :utiliserÉtat.

État du composant

Avant de nous plonger dans la compréhension de la façon dont useState() hook peut être utilisé, nous devons d’abord comprendre un concept de base de React—État.

Au cœur de chaque application React dynamique se trouve le concept d’« état ». L’état peut être considéré comme toute donnée qui détermine la sortie ou l’apparence d’un composant et peut changer au fil du temps. C’est ce qui permet à nos applications React d’être interactives et réactives aux entrées des utilisateurs ou aux modifications du système.

Historiquement, l’état des composants était géré au sein des composants de classe à l’aide de constructions telles que this.state et this.setState(). Cependant, avec l’introduction des hooks dans React, l’état peut désormais être géré de manière plus élégante et plus concise au sein des composants fonctionnels, avec le useState() crochet.

utiliserÉtat

Le useState() le hook nous permet d’ajouter l’état React aux composants fonctionnels. Le useState() hook prend un seul argument qui est la valeur initiale de la propriété d’état en cours de création et renvoie un tableau de deux valeurs :

1. La propriété de l’État que nous voulons créer.
2. Une fonction utilisée pour mettre à jour la valeur de l’état.

Dans les langages de programmation, un tableau qui renvoie un nombre fixe d’éléments dont les valeurs sont d’un type connu est souvent reconnu comme un « tuple ».

Voici un exemple d’utilisation du useState crochet pour créer un message propriété d’État avec une valeur initiale de « Hello World ! »

const [message] = useState("Hello World!");

Du useState hook, nous pouvons également déstructurer une fonction qui peut être utilisée pour modifier la valeur de la propriété d’état en cours de création. Dans notre cas d’utilisation, nous appellerons cette fonction setMessage().

const [message, setMessage] = useState("Hello World!");

Nous renvoyons les premier et deuxième éléments du tableau avec déstructuration de tableauxune fonctionnalité introduite dans ES6.

Nous afficherons la valeur du message propriété de l’État dans notre composante et disposent également d’un <button> qui, lorsqu’on clique dessus, déclenche le setMessage() fonction.

import React, { useState } from "react";

const HelloWorld = () => {
  const [message, setMessage] = useState("Hello World!");

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={() => setMessage("The message has changed!")}>
        Update message
      </button>
    </div>
  );
};

Quand le HelloWorld Le composant est d’abord rendu, le « Hello World! » message s’affiche. Lorsque l’utilisateur clique sur le <h2> élément, le setMessage() la fonction met à jour le message propriété de l’État à une nouvelle valeur de "The message has changed!". Si la valeur d’une propriété d’État est modifiée, React re-rend le composant pour afficher la nouvelle valeur d’état.

Essayez l’exemple ci-dessus dans ce qui suit CodeSandbox.

Initialisation de l’état avec une fonction

Nous avons mentionné que le useState hook prend un seul argument qui est la valeur initiale de la propriété d’état en cours de création. Cependant, parfois, la valeur de l’état initial n’est pas une simple chaîne ou un nombre ; cela pourrait nécessiter quelques calculs. Pour éviter des calculs inutiles à chaque fois que notre composant effectue un nouveau rendu, au lieu de fournir une valeur directe, nous pouvons transmettre une fonction qui renvoie la valeur initiale souhaitée. Cette fonction n’est exécutée qu’une seule fois lors du rendu initial du composant.

Par exemple, nous pouvons demander à une fonction de renvoyer la valeur de "Hello World!" à mesure que l’argument passait dans le useState() crochet.

const [message, setMessage] = useState(() => "Hello World!");

Fournir une fonction pour initialiser l’état peut être utile si nous souhaitons calculer la valeur initiale d’une propriété d’état via un calcul coûteux.

Mises à jour fonctionnelles

La fonction assurée par useState() pour mettre à jour l’état (dans notre cas, setMessage()) est polyvalent. En plus d’accepter directement de nouvelles valeurs, il peut également recevoir une fonction qui obtient l’état précédent comme argument. Cette fonctionnalité est particulièrement utile lorsque le nouvel état dépend du précédent.

Pour illustrer cela, considérons une amélioration de notre HelloWorld composant. Imaginez que nous souhaitions ajouter un point d’exclamation (!) au message chaque fois que vous cliquez sur un bouton. Au lieu de connaître l’état actuel exact de notre message, nous utiliserions l’état précédent pour effectuer le changement.

import React, { useState } from "react";

const HelloWorld = () => {
  const [message, setMessage] = useState("Hello World!");

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={() => setMessage((prevMessage) => prevMessage + "!")}>
        Add Exclamation
      </button>
    </div>
  );
};

Dans l’exemple ci-dessus, le setMessage() la fonction utilise le message actuel (récupéré sous forme prevMessage) pour ajouter un point d’exclamation. De cette façon, chaque fois que le bouton "Add Exclamation" est cliqué, un point d’exclamation sera ajouté à la fin du message en cours.

Essayez ce qui précède dans ce qui suit CodeSandbox.

La mise à jour fonctionnelle garantit que la mise à jour de l’état s’appuie sur la valeur la plus récente de l’état, la rendant à la fois dynamique et dépendante de l’état précédent.

Lorsque vous travaillez avec le useState() crochet, il est important de garder à l’esprit les points suivants.

Les mises à jour d’état sont asynchrones

Il est toujours important de se rappeler que les mises à jour d’état sont asynchrone. Par conséquent, React regroupe les mises à jour d’état pour des raisons de performances. Donc, utilisez toujours la forme fonctionnelle consistant à effectuer des changements d’état lorsque l’état suivant dépend du précédent.

Évitez les effets secondaires dans useState

En cas d’initialisation de l’état avec une fonction, la fonction utilisée pour cette initialisation doit être pure. En d’autres termes, il faudrait ne pas avoir d’effets secondaires ou dépendre de variables mutables en dehors de son champ d’application.

N’oubliez pas les nouveaux rendus

N’oubliez jamais que le changement d’état entraînera un nouveau rendu du composant ! Ce point est important à garder à l’esprit pour éviter les rendus inutiles ou les boucles infinies.

Conclure

Le useState() Le hook est la pierre angulaire de la gestion de l’état dans les composants fonctionnels de React. Sa polyvalence, de l’initialisation fonctionnelle aux mises à jour fonctionnelles, le rend indispensable. Comme nous l’avons vu avec d’autres hooks, comprendre ses nuances peut nous aider à écrire du code React propre, efficace et intuitif.