Skip to content
Learni
View all tutorials
Frontend

Comment optimiser le rendu React en 2026

18 minINTERMEDIATE
ReactPerformance

Introduction

Le rendu React est au cœur de la performance des applications web modernes. En 2026, avec des bundles de plus en plus complexes, optimiser le rendu permet d'éviter les re-rendus inutiles et d'améliorer l'expérience utilisateur. Ce tutoriel vous guide à travers les techniques avancées comme la mémorisation et les hooks de performance. Vous apprendrez à diagnostiquer les problèmes de rendu et à appliquer des solutions concrètes. Chaque exemple est conçu pour être directement applicable dans vos projets.

Prérequis

  • Node.js 20+ et React 18+
  • Connaissances solides en TypeScript et hooks React
  • Un éditeur comme VS Code avec ESLint

Initialisation du projet

terminal
npx create-vite@latest react-render-2026 --template react-ts
cd react-render-2026
npm install

Cette commande crée un projet Vite avec TypeScript, idéal pour tester les optimisations de rendu rapidement.

Composant de base sans optimisation

src/components/ProductList.tsx
import React, { useState } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
}

const ProductList: React.FC = () => {
  const [products] = useState<Product[]>([
    { id: 1, name: 'Laptop', price: 999 },
    { id: 2, name: 'Phone', price: 599 }
  ]);
  const [filter, setFilter] = useState('');

  const filteredProducts = products.filter(p => 
    p.name.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      <input 
        type="text" 
        value={filter} 
        onChange={(e) => setFilter(e.target.value)} 
      />
      {filteredProducts.map(product => (
        <div key={product.id}>{product.name} - {product.price}€</div>
      ))}
    </div>
  );
};

export default ProductList;

Ce composant se re-rend entièrement à chaque frappe clavier, même si les produits n'ont pas changé. C'est un cas classique de rendu inefficace.

Application de React.memo

src/components/ProductItem.tsx
import React from 'react';

interface ProductItemProps {
  name: string;
  price: number;
}

const ProductItem: React.FC<ProductItemProps> = ({ name, price }) => {
  console.log('Rendu ProductItem:', name);
  return <div>{name} - {price}€</div>;
};

export default React.memo(ProductItem);

React.memo empêche le re-rendu du composant si ses props n'ont pas changé. Ajoutez-le aux composants enfants pour réduire les calculs inutiles.

Utilisation de useMemo pour les calculs

src/components/ProductList.tsx
import React, { useState, useMemo } from 'react';
import ProductItem from './ProductItem';

// ... interface Product inchangée

const ProductList: React.FC = () => {
  const [products] = useState<Product[]>([/* ... */]);
  const [filter, setFilter] = useState('');

  const filteredProducts = useMemo(() => 
    products.filter(p => 
      p.name.toLowerCase().includes(filter.toLowerCase())
    ), [products, filter]
  );

  return (
    <div>
      <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} />
      {filteredProducts.map(product => (
        <ProductItem key={product.id} name={product.name} price={product.price} />
      ))}
    </div>
  );
};

export default ProductList;

useMemo mémorise le résultat du filtrage. Le tableau de dépendances garantit que le calcul ne s'exécute que lorsque products ou filter changent.

Hook personnalisé pour le rendu

src/hooks/useRenderCount.ts
import { useRef, useEffect } from 'react';

export function useRenderCount(componentName: string) {
  const count = useRef(0);
  
  useEffect(() => {
    count.current += 1;
    console.log(`${componentName} a rendu ${count.current} fois`);
  });

  return count.current;
}

Ce hook permet de tracker le nombre de rendus pendant le développement pour identifier les composants problématiques.

Intégration finale du hook

src/components/ProductList.tsx
import { useRenderCount } from '../hooks/useRenderCount';

// Dans le composant ProductList
const ProductList: React.FC = () => {
  useRenderCount('ProductList');
  // ... reste du code
};

Intégrez le hook dans vos composants pour mesurer l'impact de vos optimisations de rendu en temps réel.

Bonnes pratiques

  • Utilisez React.memo uniquement sur les composants purs avec des props stables
  • Combinez useMemo et useCallback pour éviter les nouvelles références
  • Préférez les clés uniques et stables dans les listes
  • Mesurez les performances avec React DevTools avant d'optimiser
  • Évitez la mémorisation prématurée qui complexifie le code inutilement

Erreurs courantes à éviter

  • Oublier les dépendances dans les tableaux useMemo/useEffect
  • Appliquer React.memo sur des composants qui reçoivent des objets inline créés à chaque rendu
  • Ignorer les warnings de React sur les clés manquantes
  • Optimiser sans profiler d'abord les vrais goulots d'étranglement

Pour aller plus loin

Approfondissez ces concepts avec nos formations React avancées.