Les Hooks dans React

Présentation

La semaine dernière, nous avons plongé dans les grands principes fondamentaux de React, en explorant notamment le cœur de cette bibliothèque : le cycle de vie d'un composant. Cette semaine, nous allons approfondir nos connaissances en utilisant ce que nous avons appris lors des semaines précédentes comme base, afin de nous familiariser avec les concepts avancés de React que nous découvrirons.

Les hooks

Les hooks sont un ensemble de fonctionnalités introduites et ajoutées dans la version 16.8 de React. Leur objectif principal est de permettre aux composants fonctionnels de bénéficier des mêmes fonctionnalités que les composants de classe, notamment l'utilisation du cycle de vie et de l'état local.

Jusqu'à la version actuelle de React, l'utilisation des hooks permet d'éviter le recours aux classes et favorise une meilleure réutilisabilité des fonctionnalités. Tous les hooks commencent par le mot-clé en minuscules "use".

Voici un exemple de code en composants de classe : 

class Example extends Component {

  constructor(props) {

    super(props);

    this.state = {

      count: 0

    };

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {

    this.setState({ count: this.state.count + 1 });

  }

  render() {

    return (

      <div>

        <p>Vous avez cliqué {this.state.count} fois</p>

        <button onClick={this.handleClick}>

          Cliquez ici

        </button>

      </div>

    );

  }

}

Puis voici la meme chose en hooks : 

function Example() {

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

  return (

    <div>

      <p>Vous avez cliqué {count} fois</p>

      <button onClick={() => setCount(count + 1)}>

        Cliquez ici

      </button>

    </div>

  );

}

La première chose que l'on remarque est que les hooks nous permettent d'implémenter le code d'une manière plus moderne et concise. En effet, les hooks simplifient souvent le code en permettant de gérer l'état et les effets secondaires directement dans les composants fonctionnels.

Les hooks les plus utilisés en React :

Hook d’état

Le hook useState permet d'ajouter un état aux composants fonctionnels afin de pouvoir gérer et suivre les données qui changent dans ces derniers.

Pour utiliser useState, il est nécessaire de l'importer au préalable, ce qui se fait facilement :

import React, { useState } from ‘react’;

Ensuite il faut l'appeler dans le composant:

const [stateValue, setStateValue] = useState(initialValue);

Ce qui renvoie un tableau avec la valeur actuelle de l'état et une fonction pour la mettre à jour (comme vue dans l'exemple si dessus).

Le hook d’état simplifie la gestion de l’état, facilitant ainsi la création d’applications React efficaces et évolutives avec une meilleure expérience utilisateur.

Hook d’effet

Le Hook useEffect permet aux fonctions composants de gérer des effets de bord.

Les effets de bord “Side Effects” font référence à toutes les opérations effectuées à l'extérieur du composant lui-même lors de l'exécution d'un programme. Comme récupérer des données à partir d'une API ou bien modifier le DOM.

Il est importé de la meme facon que le hook d'état : 

import { useState, useEffect } from "react";

Voici un code qui explique ce hook : 

function Example() {

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

  // Équivalent à componentDidMount plus componentDidUpdate :

  useEffect(() => {

    // Mettre à jour le titre du document en utilisant l'API du navigateur

    document.title = `Vous avez cliqué ${count} fois`;

  });

  return (

    <div>

      <p>Vous avez cliqué {count} fois</p>

      <button onClick={() => setCount(count + 1)}>

        Cliquez ici

      </button>

    </div>

  );

}

Ce composant utilise le hook useEffect pour mettre à jour le titre du document avec le nombre de clics à chaque fois que la variable d'état count change.

Ce hook permet de séparer la logique des effets de bord de la logique de rendu du composant, ce qui rend le code plus clair et plus facile à maintenir.

Autres hooks

• Le hook useReducer facilite la gestion et la mise à jour d'une ou plusieurs variables à l'aide d'actions.
• Le hook useCallback en React permet de mémoriser une fonction pour qu'elle ne soit pas recréée à chaque rendu, à moins que ses dépendances ne changent.

Les règles des hooks : 

Il existe 3 règles pour les hooks :

• Les hooks ne peuvent être appelés que à l'intérieur des composants fonctionnels React.
• Les hooks ne peuvent être appelés qu'au niveau supérieur d'un composant.
• Les hooks ne peuvent pas être conditionnels.

Le Plugin ESLint:

Il existe un plugin pour React qui permet de valider l'utilisation correcte des hooks et de garantir le respect des règles énoncées ci-dessus. Il est deja inclut par defaut dans createReactApp:

{

  "plugins": [

    // ...

    "react-hooks"

  ],

  "rules": {

    // ...

    "react-hooks/rules-of-hooks": "error", // Vérifie les règles des Hooks

    "react-hooks/exhaustive-deps": "warn"  // Vérifie les tableaux de dépendances

  }

}

Conclusion

Nous avons exploré les hooks et leurs avantages dans l'article de cette semaine, représentant une approche moderne et concise pour écrire des composants en React. La semaine prochaine, nous poursuivrons notre exploration avec des concepts avancés tels que la récupération de données depuis une API et l'implémentation de tests.

Réferences

Introduction aux Hooks. React. https://fr.legacy.reactjs.org/docs/hooks-intro.html (consulté le 29 février 2024)

Aperçu des Hooks. React. https://fr.legacy.reactjs.org/docs/hooks-overview.html (consulté le 29 février 2024)

Les règles des Hooks. React. https://fr.legacy.reactjs.org/docs/hooks-rules.html  (consulté le 29 février 2024)

Guillaumont. React Hook, les bases. nextdecison. https://www.next-decision.fr/wiki/react-hook-bases (consulté le 01 Mars 2024)

React hooks. w3shools. https://www.w3schools.com/react/react_hooks.asp (consulté le 01 Mars 2024)

VENKATA LOKESH.(2023, 24 mai). Démarrer avec les hooks de React : un aperçu du hook useState. Meritis. https://meritis.fr/demarrer-avec-les-hooks-de-react-un-apercu-du-hook-usestate/  (consulté le 01 Mars 2024)