A hook is a function provided by React that let’s you hook into react features from your function components Dan Abramov (React Conf 2018)

Les Hooks ont été introduits en 2018 pour :

• alléger la syntaxe pour créer des composants, ce sont désormais de simple fonctions
• éviter les lourdeurs liées au fonctionnement des classes avec leurs lifecycle methods
• mieux rassembler la logique du code au sein d’un même composant (éclaté dans les différents lifecyle methods des classes)
• permettre de créer un moyen de partager du code devant gérer un état local avec les custom hooks

UseState

UseState est l’un des 1er hooks introduit dans React v16.8.
Il permet de disposer d’un state au sein d’un function component, là où une classe était nécessaire avec toute la plomberie qui allait avec (déclarer un objet state initial, appeler super( ) dans le constructeur, binding du this pour les méthodes etc.).

import React, { useState } from "react";

function blah(props) {
  const [couleur, setCouleur] = useState("gris");

  return <p>couleur</p>;
}

UseEffect

Utilité

UseEffect(est un hook permettant de dire à React ce que ce composant doit faire après son rendu initial.

Il compense les lifecyle methodes componentDidMount( ), componentWillUnmount( ) et componentDidUpdate( ) qui permettent de gérer des side effect (requête ajax, logging, modif du DOM, gestion d’event listeners etc.).

UseEffect est placé à l’intérieur du composant de façon à avoir accès aux states et props (scope de la fonction, closures).

Usage

UseEffect est exécuté par défaut après chaque mount (et donc aussi après chaque re-render <=> unmount puis mount).

On peut utiliser UseEffect plusieurs fois dans un même composant pour la séparer des responsabilités (SRP) et contrôler leurs exécutions vis à vis des states dont dépendent chaque UseEffect.

Re-rendu

Pour éviter l’exécution systématique du side effect, il faut passer un 2ème argument optionnel, qui est un tableau de dépendances avec les states dont dépends l’éxécution de la fonction.
Pour un re-rendu unique indépendant d’un state, il suffit de passer un tableau vide.

Nettoyage à l’unmount

Lorsqu’un composant est démonté, il peut être utile d’avoir une phase de nettoyage équivalente au componentWillUnmount( ), nous permettant par ex de supprimer les enventListeners pour éviter les fuites mémoires, il est possible de retourner une fonction au sein de l’effet.

import React, { useState, useEffect } from "react";

function blah(props) {
  const [couleur, setCouleur] = useState("gris");

  useEffect(() => {
    window.title = `La nouvelle tendance est ${couleur}`;
  }, [couleur]);
}

UseContext

React dispose d’un hook dédié à la consommation du context permettant de partager de la data dans une arborescence complète.

Global

Les hooks doivent être utilisés tout en haut de la fonction et pas dans un bloc if, for ou autre.