Qu'est-ce que useState() dans React.js ?

Lorsque vous utilisiez le framework JavaScript ReactJS, tout le code des composants était lié à des classes. On devait systématiquement écrire une classe pour chaque composant que l'on développait. La version 16.8 a apporté une nouveauté importante dans le développement React : les Hooks. Un Hook permet d'utiliser les états et d'autres fonctionnalités du framework sans devoir écrire une classe. Cela facilite grandement l'écriture du code et permet de créer un code simple et réutilisable, stocké dans une fonction. La fonction "useState()" fait partie des Hooks. Auparavant, pour écrire un composant simple, vous deviez écrire une classe complète, ce n'est plus le cas grâce aux composants fonctionnels, rendus possibles avec les Hooks.

La fonction "useState" s'utilise comme tous les Hooks au sein d'un composant fonctionnel. Elle prend en paramètre l'état initial de votre composant et retourne un tuple composé de 2 éléments : l'état que vous manipulez et la fonction qui va mettre à jour cet état. Avec ceci, vous pouvez créer des composants rapidement, par exemple un bouton qui pourrait changer de couleur :

//Import de React et de la fonction useState
import React, { useState } from 'react',
//Appel de UseState
const [couleur, changerCouleur] = useState('rouge'),
//Définition de la fonction de changement d'état
const clicBouton = () => {
    changerCouleur('bleu'),
    //Traitement qui change la couleur du bouton
},
//Affichage
<div>
  <button onClick={() => clicBouton()}>
    Changer de couleur
  </button>
</div>

Comme "useState()", il existe plusieurs Hooks différents qui permettent de ne pas créer systématiquement des classes comme on le faisait auparavant avec ReactJS. Il y a par exemple "useEffect()" ou bien "useContext()". On peut même créer ses propres Hooks. Vous trouverez toutes les informations nécessaires pour manipuler et concevoir les Hooks dans la documentation du framework : https://fr.reactjs.org/docs/hooks-intro.html.

JavaScript