Améliorez les performances de votre application React avec la mémorisation : découverte de useMemo, useCallback et React.memo

L'amélioration des performances de votre site Web est une étape essentielle pour améliorer l'expérience utilisateur et garantir une interface solide et réactive. Si vous travaillez sur un projet React ou Next.js avec des composants gourmands en ressources, il est naturel de s'inquiéter de leur impact sur les performances. C'est là qu'intervient la mémorisation dans React : elle permet d'accélérer ces composants « coûteux », conduisant à une expérience plus fluide pour vos utilisateurs.

Dans cet article, je couvrirai la mémorisation et présenterai les hooks React qui peuvent optimiser les performances de votre application, comme useMemo(), useCallback() et le composant d'ordre supérieur React.memo (HOC). Allons-y !

Qu’est-ce que la mémorisation dans React ?

La mémorisation est une technique utilisée pour accélérer les programmes en mettant en cache les résultats des tâches de calcul, telles que les appels de fonction, de sorte que si les mêmes entrées sont fournies à nouveau, le résultat mis en cache est renvoyé au lieu de le recalculer.

Le hook useMemo : mise en cache des résultats dans React

useMemo est un hook qui met en cache ou mémorise le résultat de la fonction entre le nouveau rendu ou la mise à jour du composant.

Ainsi, en utilisant ce hook, vous pouvez mettre en cache le résultat d'une fonction qui se trouve dans votre composant et lors du prochain rendu, votre composant utilisera le résultat du cache si l'entrée de cette fonction n'est pas modifiée.

Comment implémenter useMemo :

useMemo est un hook qui prend votre fonction non optimisée comme un rappel et une liste de dépendances. React décide ensuite quand appeler cette fonction, soit lors du rendu initial, soit lors des rendus ultérieurs.

• Rendu initial : Lors du rendu initial, React appelle la fonction useMemo pour calculer et stocker le résultat de la fonction de rappel que vous avez fournie.

• Re-rendu : lors des nouveaux rendus, React appelle useMemo pour vérifier si les dépendances ont changé. Si les dépendances n'ont pas changé, React réutilise la valeur mise en cache stockée lors du dernier rendu. Cependant, si les dépendances ont changé, useMemo appelle à nouveau la fonction de rappel pour recalculer et stocker la valeur mise à jour dans le cache.

Exemple :

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

squaredNumber est calculé uniquement lorsque le nombre change. useMemo met ce calcul en cache, afin qu'il ne soit pas recalculé inutilement à chaque rendu.

Le hook useCallback : définitions des fonctions de mise en cache

useCallback est un hook qui met en cache ou mémorise la définition d'une fonction entre les rendus ou les mises à jour des composants.

En utilisant ce hook, vous pouvez stocker la définition d'une fonction lors des nouveaux rendus, donc React réutilisera cette version mise en cache tant que les dépendances de la fonction n'ont pas changé.

Comment implémenter useCallback :

useCallback est un hook qui prend une fonction (comme rappel) et une liste de dépendances. React décide ensuite quand renvoyer (ne pas appeler) cette fonction, soit lors du rendu initial, soit lors des rendus ultérieurs.

• Rendu initial : lors du rendu initial, React appelle useCallback pour stocker la fonction que vous avez transmise comme rappel.

• Re-rendu : lors des nouveaux rendus, React appelle useCallback pour vérifier si les dépendances ont changé. Si les dépendances n'ont pas changé, React réutilise la fonction mise en cache stockée lors du dernier rendu. Si les dépendances ont changé, useCallback stockera et renverra la fonction mise à jour.

Exemple :

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

La fonction React.memo : éviter les rendus inutiles

Comme vous le savez peut-être, lorsque vous avez un composant parent et des composants enfants, toute mise à jour de l'état ou des accessoires du parent entraînera le nouveau rendu de tous ses composants enfants. Dans les petits projets, cela ne pose peut-être pas de problème, mais dans les applications plus grandes et plus complexes, les rendus inutiles des composants enfants peuvent avoir un impact sur les performances. Pour résoudre ce problème, React fournit la fonction memo().

La fonction memo (ou React.memo) vous permet d'envelopper un composant pour éviter qu'il ne soit restitué lors de la mise à jour du parent. Le composant enveloppé ne sera restitué que si ses propres accessoires ou son état changent.

Lorsque vous appelez pour la première fois memo() sur un composant, React restitue et met en cache le composant. Lors des rendus suivants, React utilisera cette version mise en cache tant que les accessoires et l'état du composant n'ont pas changé. Gardez à l'esprit que memo() évite uniquement les nouveaux rendus pour les accessoires et l'état inchangés : une fois qu'ils changent, memo() restitue et met à jour le composant mis en cache en conséquence.

Comment implémenter React.memo :

Pour implémenter memo dans votre composant, enveloppez simplement le composant que vous souhaitez empêcher un nouveau rendu inutile avec memo() ou React.memo() :

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  // Memoize the callback with `count` as a dependency
  const calculate = useCallback(() => {
    console.log("Calculating:", count * multiplier);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increment Multiplier</button>
      <button onClick={calculate}>Calculate</button>
    </div>
  );
};

export default MyComponent;

Remarque :
Si vous transmettez un objet en tant qu'accessoire à un composant enveloppé dans memo(), le composant sera toujours restitué à chaque mise à jour, même si l'objet n'a pas changé. Cela se produit parce que React utilise Object.is pour comparer les accessoires précédents et actuels. Alors que Object.is(3, 3) renvoie vrai, Object.is({}, {}) renvoie faux, puisque deux références d'objet différentes ne sont jamais considérées comme égales.

Pour éviter cela, vous pouvez utiliser useMemo pour mettre l'objet en cache et conserver la même référence d'un rendu à l'autre :

import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.value}</div>;
};

export default React.memo(MyComponent);

Dans cet exemple, useMemo garantit que l'objet de données a la même référence, évitant ainsi les nouveaux rendus inutiles de MyComponent.

Merci d’avoir lu mon article ! Si vous souhaitez en savoir plus sur Next.js, React, JavaScript, etc., n'hésitez pas à suivre mon site Web : saeed-niyabati.ir. N’hésitez pas à nous contacter pour toute question. À la prochaine fois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!