Passer au contenu principal

Comprendre et utiliser le Hook useMemo en React

Supposons que nous avons un formulaire contenant plusieurs champs, notamment le mot de passe, et que nous souhaitons vérifier si ce dernier est sécurisé ou non. Dans ce cas, nous allons implémenter une fonction qui doit normalement être appelée uniquement lorsque le mot de passe change.

Le souci avec React est que si une des propriétés du composant change, il va réexécuter tout le code du composant, y compris la fonction de vérification du mot de passe.

C’est là que useMemo intervient. Ce hook permet de mémoriser une valeur et de ne changer cette valeur que lorsqu'une certaine dépendance change.

Définition du hook useMemo

useMemo ressemble à useEffect, à la différence près que useMemo retourne une valeur.

  • Premier paramètre : une fonction qui retourne une valeur.
  • Second paramètre : un tableau de dépendances. Lorsque ces dépendances changent, la fonction du premier paramètre est appelée.
import { useState, useMemo } from "react";

export default function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const passwordSecurityLevel = useMemo(() => {
    console.log("calcul complexe");

    return "fort";
  }, [password]);

  const handleEmailChange = (e) => setEmail(e.target.value);
  const handlePasswordChange = (e) => setPassword(e.target.value);

  return (
    <>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          name="email"
          value={email}
          onChange={handleEmailChange}
        />
      </div>
      <div>
        <label htmlFor="password">Mot de passe</label>
        <input
          type="password"
          name="password"
          value={password}
          onChange={handlePasswordChange}
        />
      </div>
      Votre mot de passe est : {passwordSecurityLevel}
    </>
  );
}

Dans quelles situations est-il préférable d'utiliser useMemo plutôt que useEffect ?

Dans l’exemple du mot de passe, nous voulons mémoriser le niveau de sécurité du mot de passe pour éviter de recalculer cette valeur à chaque rendu du composant. Utiliser useMemo permet de s’assurer que la fonction de vérification du mot de passe n’est exécutée que lorsque le mot de passe change, ce qui peut améliorer les performances si la vérification est complexe.

Si nous utilisions useEffect à la place, nous devrions stocker le résultat de la vérification dans un état, ce qui entraînerait un rendu supplémentaire du composant chaque fois que le mot de passe change. Cela pourrait être moins performant et plus complexe à gérer.

 

Utilisation de useMemo pour générer une valeur unique au montage du composant

Le hook useMemo peut être utilisé pour générer une valeur une seule fois durant tout le cycle de vie du composant. Pour cela, il suffit de mettre un tableau de dépendances vide. Comme il n’y a aucune dépendance, le callback de useMemo sera déclenché uniquement au montage du composant. Par exemple, pour récupérer la date du jour :

const now = useMemo(() => new Date(), []);
Retour en haut