Memoization (React)

Aujourd'hui, nous allons parler de Memoization dans React.

Qu'est-ce que la memoization ?

La memoization est une technique pour améliorer les Performances d'une application en évitant de répéter des opérations coûteuses. Elle consiste à stocker les résultats de fonctions ou les valeurs calculées pour les utiliser ultérieurement au lieu de recalculer tout le temps.

Comment ça marche avec React ?

Dans une application React, vous pouvez utiliser la memoization pour éviter de refaire des calculs lourds ou des traitements de données à chaque rendu. React fournit pour cela useMemo, qui garde en mémoire le résultat d'un calcul entre deux rendus, useCallback, qui fait de même pour une définition de fonction, et memo, qui évite de refaire le rendu d'un composant dont les props n'ont pas changé.

Exemple de code en TypeScript

Voici un exemple simple de memoization dans React :

import { useMemo } from 'react';

interface Props {
  id: number;
}

// Fonction coûteuse qui prend du temps à s'exécuter
function doSomethingExpensive(id: number): number {
  let result = 0;
  for (let i = 0; i < 10_000_000; i++) {
    result += (id * i) % 7;
  }
  return result;
}

const MemoizedComponent = ({ id }: Props) => {
  // Le calcul n'est refait que si `id` change entre deux rendus
  const data = useMemo(() => doSomethingExpensive(id), [id]);

  return (
    <div>
      <p>{data}</p>
    </div>
  );
};

Dans cet exemple, nous avons un composants (components, React) MemoizedComponent qui reçoit un identifiant (id) en tant que propriété. Au premier rendu, useMemo appelle la fonction doSomethingExpensive et garde son résultat en mémoire. Aux rendus suivants, tant que id n'a pas changé, React renvoie le résultat déjà calculé sans rappeler la fonction. Si id change, le calcul est refait.

Avantages de la memoization

La memoization peut améliorer les performances de votre application en :

• Évitant de répéter des opérations coûteuses
• Réduisant les temps d'exécution
• Améliorant la responsivité de l'application

Conclusion

En résumé, la memoization est une technique importante pour améliorer les performances de votre application React. En gardant en mémoire les résultats de calculs avec useMemo, useCallback ou memo, vous pouvez éviter de répéter des opérations coûteuses et améliorer ainsi l'expérience utilisateur. Le React Compiler peut aussi appliquer cette memoization automatiquement.

C'est tout pour aujourd'hui !

Voici quelques notions liées au développement avec React que nous pouvons explorer plus loin :

1. Immutable.js : Comment utiliser Immutable.js pour gérer l'état de vos composants React ?
2. Contexts API (React) : Qu'est-ce que la Context API dans React et comment l'utiliser pour partager des états entre les composants ?
3. useCallback et useMemo : Comment utiliser useCallback et useMemo pour optimiser les performances de vos composants React ?
4. Hooks (React) : Quels sont les différents types de hooks disponibles dans React (useState, useEffect, etc.) et comment les utiliser ?
5. React Profiling : Comment utiliser la fonctionnalité de profilage dans Chrome DevTools pour identifier les parties lourdes de votre application React ?
6. Web Workers avec React : Qu'est-ce que les web workers et comment les utiliser avec React pour améliorer les performances de vos applications ?
7. React Server Components : Comment utiliser les composants serveur de React pour améliorer les performances de vos applications et réduire le poids du code client ?
8. Error Boundaries (React) : Qu'est-ce que l'erreur boundary dans React et comment la configurer pour gérer les erreurs dans vos applications ?

Ces notions devraient vous donner des idées pour explorer plus loin dans le domaine du développement avec React !