Gérer l’État dans React : Guide sur useState, useReducer et le Context API

1. Gérer l’État Simple avec useState

Dans React, l’état (ou “state” en anglais) est une manière de stocker des données qui peuvent changer au fil du temps. Imaginez l’état comme une boîte dans laquelle vous mettez des informations importantes que votre application doit se rappeler, comme le contenu d’un formulaire ou le nombre d’éléments dans une liste.

Le hook useState est la manière la plus simple de gérer l’état dans un composant fonctionnel. Voici comment il fonctionne :

Initialisation : Vous commencez par déclarer une variable d’état et une fonction pour la mettre à jour. Par exemple, const [count, setCount] = useState(0); crée une variable count initialisée à 0 et une fonction setCount pour la modifier.

Mise à jour : Chaque fois que vous appelez setCount avec une nouvelle valeur, React met à jour l’état et réaffiche le composant avec les nouvelles données.

import React, { useState } from 'react';

function Counter() {

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

  return (

    <div>

      <p>Compteur : {count}</p>

      <button onClick={() => setCount(count + 1)}>Incrémenter</button>

    </div>

  );

}

export default Counter;

Dans cet exemple, chaque clic sur le bouton augmente le compteur de 1.

2. Gérer l’État Complex avec useReducer

Pour des états plus complexes, comme ceux nécessitant plusieurs actions ou dépendant de l’état précédent, useReducer est plus adapté. Il fonctionne de manière similaire à useState, mais avec une logique de mise à jour plus structurée.

Reducer : Une fonction qui prend l’état actuel et une action, et retourne le nouvel état.

Dispatch : Une fonction qui envoie des actions au reducer pour mettre à jour l’état.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {

  switch (action.type) {

    case 'increment':

      return { count: state.count + 1 };

    case 'decrement':

      return { count: state.count - 1 };

    default:

      throw new Error();

  }

}

function Counter() {

  const [state, dispatch] = useReducer(reducer, initialState);

  return (

    <div>

      <p>Compteur : {state.count}</p>

      <button onClick={() => dispatch({ type: 'increment' })}>Incrémenter</button>

      <button onClick={() => dispatch({ type: 'decrement' })}>Décrémenter</button>

    </div>

  );

}

export default Counter;

Dans cet exemple, useReducer permet de gérer plusieurs actions (incrémenter et décrémenter) de manière claire et organisée.

3. Partager l’État entre Composants avec le Context API

Parfois, vous avez besoin de partager des données entre plusieurs composants sans passer explicitement les props à chaque niveau. Le Context API permet de créer un contexte global pour partager des données.

Créer un contexte : Utilisez React.createContext() pour créer un contexte.

Fournir le contexte : Utilisez le Provider pour rendre les données disponibles aux composants enfants.

Consommer le contexte : Utilisez useContext pour accéder aux données dans les composants enfants.

import React, { useContext, useState, createContext } from 'react';

const CountContext = createContext();

function CountProvider({ children }) {

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

  return (

    <CountContext.Provider value={{ count, setCount }}>

      {children}

    </CountContext.Provider>

  );

}

function Counter() {

  const { count, setCount } = useContext(CountContext);

  return (

    <div>

      <p>Compteur : {count}</p>

      <button onClick={() => setCount(count + 1)}>Incrémenter</button>

    </div>

  );

}

function App() {

  return (

    <CountProvider>

      <Counter />

    </CountProvider>

  );

}

export default App;

Dans cet exemple, le contexte CountContext permet de partager l’état count entre plusieurs composants sans passer de props.

4. Conclusion

Gérer l’état dans React peut sembler complexe au début, mais avec useState, useReducer, et le Context API, vous disposez d’outils puissants pour gérer des états simples et complexes, ainsi que pour partager des données entre composants. En comprenant ces concepts, vous pouvez créer des applications React plus robustes et maintenables.

Que vous soyez débutant en React ou que vous cherchiez à approfondir vos connaissances, maîtriser la gestion de l’état est essentiel pour développer des applications dynamiques et interactives.