State et Cycle de Vie : Gérer les Données en React

Hello tout le monde !

Cette semaine, je me suis plongé dans un sujet essentiel en React : le state et le cycle de vie des composants.
Si tu débutes en React, ces concepts peuvent sembler un peu flous au début, mais ne t’inquiète pas ! Je vais tout t’expliquer simplement.

Qu’est-ce que le state en React ?

Le state (ou "état" en français) est une donnée interne à un composant. Contrairement aux props, qui sont transmises de parent à enfant et ne peuvent pas être modifiées, le state est modifiable.

C’est grâce au state qu’une application React devient interactive : chaque fois que le state change, le composant est mis à jour automatiquement.

Exemple simple : un compteur

Avec les composants fonctionnels modernes, on utilise le hook useState pour gérer le state :

import { useState } from 'react';

function Counter() {
  // Déclaration d'un state "count" avec une valeur initiale de 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      {/* Mise à jour du state lorsqu'on clique sur le bouton */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Explication :

• useState(0) crée une variable count et une fonction setCount pour la mettre à jour.
• count commence à 0 (valeur initiale).
• setCount(count + 1) met à jour count quand on clique sur le bouton.
• Quand le state change, React recharge automatiquement le composant pour afficher la nouvelle valeur.

Le cycle de vie d’un composant en React

En React, chaque composant suit un cycle de vie qui correspond aux différentes étapes de son existence :

1. Montage (quand le composant est affiché pour la première fois)
2. Mise à jour (quand il change, par exemple quand son state ou ses props sont modifiés)
3. Démontage (quand il est supprimé de l’écran)

Avant : avec les composants en classe

Dans les anciennes versions de React, on utilisait des méthodes spéciales (componentDidMount, componentDidUpdate, componentWillUnmount) pour suivre ces étapes.

Maintenant : avec useEffect

Avec les hooks, on utilise useEffect, qui permet d’exécuter du code à certains moments du cycle de vie.

Exemple : un composant qui affiche un message dans la console

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log(" Le composant est monté !");
    
    return () => {
      console.log(" Le composant est démonté !");
    };
  }, []);

  return <p>Regarde la console !</p>;
}

Explication :

• useEffect(() => {...}, []) exécute le code une seule fois, au moment où le composant est affiché.
• La fonction retournée (return () => {...}) s’exécute quand le composant disparaît (nettoyage).

Pourquoi c’est utile ?

• Charger des données depuis une API au montage du composant.
• Nettoyer un timer ou un événement lorsqu'un composant disparaît.

Mon avis

L’introduction des hooks (useState, useEffect, etc.) a simplifié la gestion du state et du cycle de vie des composants React. Plus besoin d’utiliser des classes compliquées !

Mais attention :
Bien comprendre les dépendances de useEffect (le tableau [] à la fin) pour éviter des boucles infinies ou des mises à jour inutiles.

La semaine prochaine, je vais parler des autres hooks et pourquoi ils ont complètement changé React !

Références

• State and Lifecycle https://legacy.reactjs.org/docs/state-and-lifecycle.html (page consultée le 12 février 2025)

• React State & Lifecycle Explained (Class/Hooks) - MicroBytes (2020) - YouTube https://www.youtube.com/watch?v=38Lz08LNKEY (page consultée le 13 février 2025)

• React JS Formation complète (Épisode 6 : cycle de vie) - YouTube https://www.youtube.com/watch?v=1oaJtpIhe8Q (page consultée le 13 février 2025).