logo oujood
🔍

Optimisation des Performances en React

OUJOOD.COM

Introduction

Dans ce tutoriel, nous allons explorer des techniques avancées pour optimiser les performances de votre application React. Nous aborderons des concepts tels que React.memo, useCallback, lazy loading, et l'utilisation de l'outil React DevTools pour identifier et résoudre les problèmes de performance.

Utilisation de React.memo pour éviter les re-renders inutiles

React.memo est une fonction de haut niveau qui permet de mémoïser un composant, c'est-à-dire de ne le re-rendre que si ses props changent. Cela est particulièrement utile pour les composants qui reçoivent des props complexes ou qui sont souvent re-rendus inutilement.

📋 Copier le code

import React, { memo } from 'react';

function MyComponent({ value }) {
console.log('MyComponent re-rendered');
return <div>{value}</div>;
}

export default memo(MyComponent);

Explication du code :

  • memo : Enveloppe le composant pour éviter les re-renders inutiles. Le composant ne sera re-rendu que si les props changent.
  • value : Si cette prop ne change pas, le composant ne sera pas re-rendu, même si son parent est re-rendu.

Utilisation de useCallback pour mémoïser les fonctions

useCallback est un hook qui permet de mémoïser une fonction, c'est-à-dire de ne la recréer que si ses dépendances changent. Cela est utile pour éviter des re-renders inutiles lorsque des fonctions sont passées comme props à des composants enfants.

📋 Copier le code

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

function ParentComponent() {
const [count, setCount] = useState(0);

const increment = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);

return (
<div>
	<button onClick={increment}>Incémenter</button>
	<ChildComponent onIncrement={increment} />
</div>
);
}

function ChildComponent({ onIncrement }) {
console.log('ChildComponent re-rendered');
return <button onClick={onIncrement}>Incémenter depuis l'enfant</button>;
}

export default ParentComponent;

Explication du code :

  • useCallback : Mémoïse la fonction increment pour éviter qu'elle ne soit recréée à chaque rendu du composant parent.
  • ChildComponent : Ne sera re-rendu que si la fonction onIncrement change, ce qui n'arrivera pas grâce à useCallback.

Lazy Loading avec React.lazy et Suspense

React.lazy permet de charger des composants de manière paresseuse (lazy loading), c'est-à-dire uniquement lorsqu'ils sont nécessaires. Cela réduit le temps de chargement initial de l'application.

📋 Copier le code

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
return (
<div>
	<Suspense fallback={<div>Chargement...</div>}>
		<LazyComponent />
	</Suspense>
</div>
);
}

export default App;

Explication du code :

  • React.lazy : Charge le composant LazyComponent de manière asynchrone.
  • Suspense : Affiche un composant de secours (fallback) pendant que le composant est en cours de chargement.

Utilisation de React DevTools pour identifier les problèmes de performance

React DevTools est une extension de navigateur qui permet de déboguer et d'analyser les performances d'une application React. Voici quelques fonctionnalités utiles :

  • Profiler : Permet d'enregistrer et d'analyser les re-renders des composants.
  • Highlight updates : Met en évidence les composants qui sont re-rendus.
  • Component tree : Affiche l'arborescence des composants et leurs props.

Conclusion

Vous avez maintenant une solide compréhension des techniques d'optimisation des performances en React. Que ce soit pour éviter les re-renders inutiles avec React.memo, mémoïser des fonctions avec useCallback, ou charger des composants de manière paresseuse avec React.lazy, ces techniques vous permettront de créer des applications React plus rapides et plus efficaces.

Pour continuer votre apprentissage, découvrez comment écrire des tests unitaires pour vos composants React dans le chapitre suivant : Tests Unitaires avec Jest et Testing Library.


Cours precedent   Sommaire     Cours suivant