Optimisation de l'application React avec un mémo de réaction et useCallback h.

La fonction de React memoest un outil puissant pour empêcher la réévaluation inutile des composants fonctionnels. En enveloppant un composant dans la memofonction, vous pouvez indiquer à React de restituer le composant uniquement lorsque ses accessoires ont changé. Cela peut grandement améliorer les performances de votre application, surtout si vous avez un grand nombre de composants qui sont fréquemment restitués.

Voici un exemple d'utilisation memopour éviter la réévaluation inutile d'un composant simple :

import React, { memo } from 'react';

const TenchoComponent= (props) => {
  // component implementation
});

export default React.memo(TenchoComponent)

Si tel est le cas, pourquoi n'appliquons-nous pas cela à tous les composants ? L'utilisation du mémo a également un coût. Lorsque nous utilisons le memo , avant le rendu, React va à TenchoComponent et compare l'ancienne valeur à la nouvelle valeur. Dans ce processus, la réaction doit effectuer 2 tâches, d'abord stocker l'ancienne valeur, puis comparer l'ancienne valeur à la nouvelle valeur qui a également son propre coût de performance. Par conséquent, cela dépend grandement du composant, du nombre d'accessoires transmis au composant et du nombre de composants enfants. Le mémo React peut être un excellent outil si nous avons une grande arborescence de composants avec de nombreux composants enfants.

La comparaison de l'ancienne valeur et de la nouvelle valeur se fait à l'aide d'un opérateur de comparaison régulier ' === '. Cette comparaison ne fonctionnera que sur les types de données primitifs tels que booléen, chaîne, etc., mais cela ne fonctionnera pas pour les valeurs non primitives telles que les tableaux, les objets, etc.

false===false
// will return true

'tencho' === 'tencho'
// will return true

[1,2,3]===[1,2,3]
//will return false

{} ==={}
// will return false

Voici un exemple d'utilisation du useCallbackcrochet dans un composant fonctionnel React :

import { useCallback } from 'react';

function MyComponent({ someProp }) {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <p>You have clicked the button {count} times</p>
    </div>
  );
}

export default MyComponent;

Ceci est utile lorsque vous avez un composant qui restitue fréquemment et que vous souhaitez empêcher la recréation de certaines fonctions à chaque rendu. En utilisant useCallbackpour encapsuler une fonction, vous pouvez vous assurer que la fonction n'est recréée que lorsque les dépendances spécifiées dans le deuxième argument ont changé.

Il convient de noter que useCallbackest similaire à useMemoet les deux sont utiles pour éviter les re-rendus inutiles, mais useMemoest utilisé pour mémoriser la valeur d'une fonction et useCallbackest utilisé pour mémoriser la fonction elle-même.