Comprendre le cycle de vie des composants React

Salut les amis !

Si vous êtes un développeur en herbe qui souhaite se lancer dans la programmation avec ReactJs, il est important de bien comprendre le cycle de vie des composants React. Si vous ne le faites pas, vous risquez de commettre des erreurs qui pourraient avoir des conséquences désastreuses sur les performances de votre application.

Les 3 phases du cycle de vie d’un composant React

Le cycle de vie des composants React est divisé en trois phases :

1. Montage
2. Mise à jour
3. Démontage

Illustration du cycle de vie d’un composant React avec les termes techniques en anglais

Chacune de ces phases a un impact sur le fonctionnement de votre application et sur sa stabilité. Il est donc crucial de bien comprendre chacune de ces phases.

Montage

Prenons un exemple simple : imaginez que vous construisiez une maison et que vous ajoutiez une nouvelle pièce à cette maison. Lorsque vous ajoutez cette nouvelle pièce, vous pouvez y installer de nouveaux meubles et objets. De même, lors du montage d'un composant React, vous pouvez initialiser son état et y ajouter des données externes.

import React, { useState } from 'react'

const MonComposant = () => {
  const [message, setMessage] = useState('Bonjour tout le monde')

  return <div>{message}</div>
}

Dans cet exemple, nous avons utilisé le hook d'état (useState) pour initialiser l'état du composant avec un message "Bonjour tout le monde". Lorsque le composant est monté, la valeur de l'état est affichée dans la balise div.

Mise à jour

Prenons un autre exemple : imaginez que vous possédiez une voiture et que vous changiez le pneu de cette voiture. Vous ne pouvez pas simplement retirer le pneu de la voiture et le remplacer par un nouveau pneu. Vous devez utiliser des outils spécifiques et suivre une procédure précise pour éviter de causer des dommages supplémentaires à la voiture. De même, lorsque vous mettez à jour un composant React, vous devez utiliser la méthode setState() pour modifier l'état du composant.

import React, { useState } from 'react'

const MonComposant = () => {
  const [message, setMessage] = useState('Bonjour tout le monde')

  const handleClick = () => {
    setMessage('Au revoir tout le monde')
  }

  return (
    <div>
      <div>{message}</div>
      <button onClick={handleClick}>Cliquez ici pour dire au revoir</button>
    </div>
  )
}

Dans cet exemple, nous avons ajouté un bouton à notre composant qui permet de modifier l'état du composant lorsque l'utilisateur clique dessus. Nous avons utilisé le hook d'état (useState) pour modifier l'état du composant, afin de garantir que les modifications soient bien reflétées.

Démontage

Prenons un dernier exemple : imaginez que vous soyez en train de construire un château de sable sur la plage. Lorsque vous avez fini de jouer avec le château de sable, vous devez nettoyer la plage et enlever toutes les traces de votre construction. De même, lorsque vous démontez un composant React, vous devez nettoyer les ressources et les événements que vous avez utilisés, afin d'éviter les fuites de mémoire et de garantir la stabilité de votre application.

import React, { useState, useEffect } from 'react'

const MonComposant = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((count) => count + 1)
      console.log('Hello')
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  }, [])

  return <div>Mon Composant</div>
}

Dans cet exemple, nous avons créé un composant React qui affiche le message "Mon Composant". Pendant la phase de montage, nous avons utilisé le hook useEffect pour créer un timer qui affiche "Hello" toutes les secondes. Pendant la phase de démontage, nous avons utilisé la fonction de retour de useEffect pour nettoyer le timer et éviter une fuite de mémoire.

Comprendre le cycle de vie des composants React est essentiel pour éviter les erreurs courantes qui pourraient avoir un impact négatif sur les performances de votre application. N'oubliez pas d'utiliser le hook d'état (useState) pour modifier l'état du composant pendant la phase de mise à jour et le hook useEffect pour nettoyer les ressources pendant la phase de démontage.

J'espère que ces exemples vous aideront à mieux comprendre ce concept crucial en programmation ReactJs. Dans la prochaine partie de cette série d'articles, nous examinerons d'autres erreurs courantes à éviter lors de la programmation avec ReactJs. Restez à l'écoute !