Comprendre l’hook useState sur React

Sommaire

1. Introduction à useState
2. États et types de données
3. Rendu conditionnel avec le useState() hook
4. Utiliser useState() pour un formulaire
5. Résumé

Avant de commencer

Si vous souhaitez maîtriser cet outil, vous pouvez suivre notre formation React. Cette formation vous permettra d’optimiser vos performances web, créer des composants Web complexes et développez des applications Web.

L’équipe Ambient IT

Introduction à useState

Qu’est-ce que l’hook useState dans React ?

C’est une fonctionnalité de React qui permet d’ajouter un état local à des composants fonctionnels. Ils ont été Introduits pour la première fois dans la version 16.8 de React, ce qui a marqué un tournant dans la façon dont les composants peuvent gérer leur propre état sans avoir recours à une classe.

Le Hook prend une valeur d’état initiale comme argument et il renvoie une valeur d’état mise à jour toutes les fois où la set fonction est appelée. Il peut être utilisé comme ceci :

const [state, setState] = useState(initialValue);

Le initialValue désigne la valeur avec laquelle vous souhaitez commencer et le state de la valeur de l’état actuel qui peut être utilisée dans votre composant. La setState fonction est utilisable pour mettre à jour le state, déclenchant un nouveau rendu de votre composant.

L’Hook useState est-il réellement crucial ?

Son importance réside dans sa capacité à simplifier la gestion de l’état au sein des composants fonctionnels. Avant son apparition, pour gérer un état, il fallait utiliser des classes, ce qui pouvait alourdir et complexifier le code.

États et Types de Données

Peut-on utiliser useState avec des objets ou des tableaux ?

Oui, useState est flexible et peut gérer des objets ou des tableaux comme état. Cependant, il ne faut jamais modifier directement un objet ou un tableau stocké dans useState. Il est préférable de créer une nouvelle version de mise à jour de l’objet ou du tableau et appeler setState avec la nouvelle version comme cela :

// Objets const [ state , setState ] = useState ({ name : 'John' , age : 30 }); const updateName = () => { 
  setState ({ ... state , nom : 'Jane' }); } ; const updateAge = () => { 
  setState ({ ... état , âge : état . âge + 1 }); } ; // Tableaux const [ array , setArray ] = useState ([ 1 , 2 , 3 , 4 , 5 ]); const addItem = () => { 
  setArray ([... array , 6 ]); } ; const removeItem = () => { 
  setArray ( array . slice ( 0 , array . length - 1 )); } ;
       

Comment gérer les types de données complexes avec useState ?

Pour manipuler des données complexes telles que des objets ou des tableaux, il est important de respecter l’immutabilité. Ceci implique d’utiliser des fonctions telles que ...spread ou Object.assign pour les mises à jour.

Rendu conditionnel avec le useState()Hook

Dans cet exemple, nous allons mettre à jour l’état selon deux conditions : si l’utilisateur est connecté ou non. Cela explique également pourquoi l’état initial est défini sur false, ce qui signifie que l’utilisateur n’est pas connecté.

Il faudra créer un bouton de connexion utilisant le useState() hook afin d’afficher deux résultats différents.

L’un est un bouton de connexion comportant un message qui indique à l’utilisateur de se connecter. L’autre est un bouton où lorsque l’utilisateur est connecté, ça lui donne le choix de se déconnecter.

import React from 'react'

const Signin = () => {
  return (
    <div>
        <div>
            <button type="button">Sign Out</button>
            <p>Welcome back, good to see you in here<p>
        </div>
        <div>
            <button type="button">Sign In</button>
            <p>Please Sign in</p>
        </div>
    </div>
  )
}

export default Signin;

Afin d’implémenter les fonctionnalités de connexion et de déconnexion, il faudra importer des fichiers useState(). Une fois cela effectué, vous devrez utiliser le rendu conditionnel pour spécifier comment les boutons répondront à un clic.

import React, { useState } from 'react'

const Signin = () => {
    const [signedin, setSignedin] = useState(false)

    const handleSignin = () => {
        setSignedin(true)
    }

    const handleSignout = () => {
        setSignedin(false)
    }
  return (
         <div>
           { signedin ? ( 
        <div>
            <button type="button" onClick={handleSignout}>Sign Out</button>
            <p>Welcome back, good to see you in here</p>
        </div>) :
        
        (<div>
            <button type="button"onClick={handleSignin}>Sign In</button>
            <p>Please Sign in</p>
        </div>)
           }
        </div>
  )
}

export default Signin;

Dans ce code, une variable a été créée avec le useState() hook défini signedin sur false. Lors du premier chargement, l’utilisateur ne sera pas connecté, cependant, une fois qu’il aura cliqué sur le bouton de connexion, il pourra avoir accès.

Des variables qui gèrent respectivement la connexion, la déconnexion et la définition de la set fonction sur true et false ont été créés, plus précisément handleSignin et handleSignout.

Enfin, le onClick a été créé, un gestionnaire qui déclenche une action lorsqu’un clic a été effectué. Cette action est dirigée par l’opérateur conditionnel.

Utiliser useState() pour un formulaire

Le développeur va définir un état vide utilisant la fonction set pour gérer ce que l’utilisateur pourra saisir comme entrée. Prenons comme exemple, un formulaire où l’utilisateur est seulement censé renseigner son nom et son adresse e-mail. Voici à quoi ressemblerez le formulaire :

import React from 'react'

const Theform
 = () => {
  return (
    <div>
        <form>
            <input type="text" placeholder="enter your name" required />
            <input type="email" placeholder="enter your email" required />
            <button type="submit">Submit</button>
        </form>

    </div>
  )
}

export default Theform;

Par la suite, il est important d’importer le hook dans votre fichier. Une fois cela réalisé, vous pouvez utiliser useState pour définir le nom et l’adresse e-mail sur null pendant que vous attendez que l’utilisateur saisisse ses coordonnées.

Ensuite, vous devez créer une fonction avec le handleSubmit qui va exécuter la preventDefault()méthode et console.log avec le nom de l’utilisateur et son e-mail afin de pouvoir obtenir les détails à l’aide du onSubmit() gestionnaire d’évènements.

La fonction set sera utilisé pour le nom et l’e-mail afin de cibler un changement dans l’entrée et obtenir la valeur de l’entrée que vous avez initialisée au fur et à mesure de votre hook useState().

Il est important de ne pas oublier que le useState utilise la fonction set pour le rendu. Cela veut dire, que vous restituez les nouvelles valeurs que l’utilisateur a ajoutées dans le formulaire. C’est pourquoi, vous définissez la valeur de votre entrée sur value={user}.

import React, { useState }from 'react'

const Theform
 = () => {

  const [user, setUser] = useState('')
  const [email, setEmail] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(user, email)

  }
  return (
    <div>
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="enter your name"  onChange={(e) 
            => {setUser(e.target.value)}} value ={user} required />
                
            <input type="email" placeholder="enter your email" onChange={(e)  
            => {setEmail(e.target.value)}} value={email} required />
            <button type="submit">Submit</button>
            
        </form>

    </div>
  )
}

export default Theform;

En résumé

L’hook useState est un outil essentiel pour une gestion efficace de l’état dans les composants fonctionnels, ce qui contribue à la création d’applications React plus modernes et performantes. Les hooks, y compris useState, ont ouvert la voie à une manière plus fonctionnelle et concise de construire des composants. Ils continueront d’évoluer et de façonner l’avenir du développement React.