Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

3.1. Le Hook d’état

Pour rappel, il n’est pas possible d’ajouter un état à un composant de fonction, à moins de passer par un Hook.

Le Hook permettant d’ajouter un state à un composant se nomme useState, tout simplement. Plutôt que de vous décrire toutes les possibilités offertes par ce Hook, commençons tout de suite par regarder le code. Je vais mettre en place un state pour la variable name de notre composant App.tsx :

import React, { FunctionComponent, useState } from 'react';

const App: FunctionComponent = () => {
  const [name, setName] = useState('React');

  return (
    <h1>Hello, {name} !</h1>
  );
}

export default App;

Nous n’avons modifier que deux lignes dans ce code (et pourtant, il y a pas mal de changements comme vous allez voir) :

  • À la ligne 1, on importe le Hook useState. Sans surprises, ce Hook fait partie de React, comme je vous l’ai mentionné précédemment.
  • À la ligne 4, on utilise le Hook useState pour mettre en place un état. En un seule ligne, on a mis en place un état, initialisé une valeur par défaut pour cet état, et mis en place un fonction permettant de modifier cet état. Bon, mais découpons tout ça, afin que ce soit plus claire pour tout le monde.

D’abord, que fait la fonction useState ? (Rappelez-vous que les Hooks sont de simples fonctions JavaScript)

Eh bien, sans surprise, cela permet déclare une « variable d’état ». Cette méthode prend en argument une valeur correspondant à état l’initial du composant. Cela peut être n’importe quelle valeur : un nombre, un objet, une chaîne de caractères, un tableau, etc. Dans notre exemple, l’état est initialisé avec la valeur « React« .

Ensuite, cette fonction retourne une paire de deux éléments : l’état actuel et une fonction pour modifier la valeur de cet état. Dans notre cas, il s’agit de name et setName, entre crochets. Ensuite, dans notre composant nous pouvons utiliser ces éléments dès que nous en aurons besoin.

Heu… Pourquoi est-ce qu’il y a des crochets ? Le Hook useState renvoie un tableau de deux éléments, c’est bien ça ?

Oui, c’est exactement ça. Mais en fait la syntaxe des crochets est lié au destructuring de ECMAScript 6, si vous vous rappelez bien. 😇 Voici comment vous pouvez récupérer les éléments de useState sans le destructuring :

  var nameStateVariable = useState('React'); // Renvoie un tableau de deux éléments.
  var name = nameStateVariable[0]; // L'état est le premier élément du tableau.
  var setName = nameStateVariable[1]; // La méthode permettant de modifier le state est le deuxième élément.

Et voici la syntaxe avec le destructuring :

const [name, setName] = useState('React'); // Déclaration d'un état avec le destructuring.

Sans hésitez, nous allons opter pour la deuxième solution, qui permet d’éviter deux lignes de code chaque fois que vous déclarez un state. Vous vous habituerez vite à cette syntaxe, ne vous inquiétez pas. Mieux vaut prendre les bonnes habitudes tout de suite.

Donc si nous résumons, nous déclarons une variable d‘état appelée name, et l’initialisons avec la valeur « React« . Ensuite, React va sauvegarder et maintenir à jour cet état, nous n’avons plus rien à faire de notre côté. Si nous voulons modifier la valeur de name, nous pouvons appeler la méthode setName, ce que nous verrons plus tard.

Avant de terminer, avez vous remarqué que notre code JSX n’a pas été modifié :

<h1>Hello, {name} !</h1>

Pour lire la valeur de notre état, il nous suffit de passer la variable d’état à JSX, React s’occupe de tout cela pour nous. 👍

Si vous avez un petit avertissement dans la console de votre navigateur, à propos de la valeur setName qui n’est pas utilisé, ignorez-le pour le moment. C’est simplement que nous ne modifions pas encore notre state, et donc que nous n’utilisons pas la méthode setName pour le moment. Mais ça viendra plus tard.

Ignorons cet avertissement pour le moment.