## Introduction
Les performances sont cruciales pour offrir une bonne expérience utilisateur. Dans cet article, nous allons explorer différentes techniques pour optimiser les performances de votre application React.
## 1. Utiliser React.memo pour les composants fonctionnels
`React.memo` est un HOC (Higher Order Component) qui mémorise le résultat du rendu d'un composant. Si les props ne changent pas, React réutilise le résultat du dernier rendu au lieu de re-rendre le composant.
```jsx const MyComponent = React.memo(function MyComponent(props) { /* rendu utilisant props */ }); ```
## 2. Utiliser useCallback pour les fonctions
Le Hook `useCallback` retourne une version mémorisée d'une fonction callback qui ne change que si une des dépendances a changé :
```jsx import React, { useState, useCallback } from 'react';
function ParentComponent() { const [count, setCount] = useState(0); // La fonction handleClick n'est recréée que si count change const handleClick = useCallback(() => { console.log(`Cliqué, count: ${count}`); }, [count]); return <ChildComponent onClick={handleClick} />; } ```
## 3. Utiliser useMemo pour les calculs coûteux
Le Hook `useMemo` mémorise le résultat d'un calcul coûteux. La fonction passée à `useMemo` ne s'exécute que lorsqu'une des dépendances change :
```jsx import React, { useMemo } from 'react';
function MyComponent({ list, filter }) { // filteredList n'est recalculé que si list ou filter change const filteredList = useMemo(() => { return list.filter(item => item.includes(filter)); }, [list, filter]); return ( <ul> {filteredList.map(item => <li key={item}>{item}</li>)} </ul> ); } ```
## 4. Utiliser la virtualisation pour les listes longues
Pour afficher des listes longues, utilisez des bibliothèques comme `react-window` ou `react-virtualized` qui ne rendent que les éléments visibles à l'écran :
```jsx import React from 'react'; import { FixedSizeList } from 'react-window';
function MyList({ items }) { const Row = ({ index, style }) => ( <div style={style}> {items[index]} </div> ); return ( <FixedSizeList height={400} width={300} itemSize={35} itemCount={items.length} > {Row} </FixedSizeList> ); } ```
## 5. Code splitting avec React.lazy et Suspense
Utilisez `React.lazy` et `Suspense` pour diviser votre code en chunks plus petits et ne charger que ce qui est nécessaire :
```jsx import React, { Suspense, lazy } from 'react';
// Chargement dynamique du composant const OtherComponent = lazy(() => import('./OtherComponent'));
function MyComponent() { return ( <div> <Suspense fallback={<div>Chargement...</div>}> <OtherComponent /> </Suspense> </div> ); } ```
## Conclusion
L'optimisation des performances est un processus continu. Commencez par mesurer les performances de votre application avec les outils de développement React, puis appliquez ces techniques pour résoudre les problèmes identifiés. N'oubliez pas que l'optimisation prématurée peut compliquer votre code inutilement, alors concentrez-vous d'abord sur les problèmes réels.