Retour au blog

Code écolo React : 20 bonnes pratiques (moins de div, useMemo, useCallback)

· 10 min de lecture

Comment faire du code écolo en React ? Voici une checklist claire : moins de div inutiles, calculs mémoïsés, composants plus légers et bundle maîtrisé.

Le code écolo commence par la sobriété structurelle

Un front-end plus sobre consomme moins d'énergie côté navigateur, CPU et réseau. Chaque composant inutile, chaque div superflu et chaque re-render évitable augmente le coût énergétique global.

20 pratiques simples à appliquer pour réduire le poids, les calculs et les re-renders

1) Réduire le DOM : moins de div, plus de sens

  • Éviter les wrappers inutiles : remplacer les div vides par des fragments React (`<>...</>`).
  • Utiliser des balises sémantiques (`header`, `main`, `section`, `footer`) pour un DOM plus lisible.
  • Limiter la profondeur du DOM : moins d'imbrication = rendu plus rapide.
  • Mutualiser les layouts récurrents au lieu de dupliquer des conteneurs.
  • Supprimer les composants purement décoratifs quand le CSS peut faire le travail.

2) Limiter les re-renders React inutiles

  • Utiliser `useMemo` pour les calculs coûteux (tri, filtres, agrégations) dépendants d'inputs stables.
  • Utiliser `useCallback` pour stabiliser les handlers passés en props à des enfants mémoïsés.
  • Encapsuler les composants de présentation avec `React.memo` quand leurs props changent peu.
  • Éviter de recréer des objets/arrays inline dans le JSX quand ce n'est pas nécessaire.
  • Utiliser des clés stables dans les listes (jamais l'index si l'ordre peut changer).
  • Segmenter l'état local par zone d'UI pour limiter les rafraîchissements globaux.

3) Réduire JavaScript, images et transferts réseau

  • Activer le code splitting avec `import()` pour charger seulement ce qui est nécessaire.
  • Retirer les dépendances lourdes peu utilisées, préférer des utilitaires ciblés.
  • Compresser les images en WebP/AVIF et utiliser `loading="lazy"` hors écran.
  • Préférer SVG pour les icônes au lieu de bibliothèques d'icônes complètes.
  • Mettre en cache les ressources statiques avec hash de fichier et TTL long.
  • Réduire les appels API redondants via cache client (TanStack Query, SWR...).

4) Garder une démarche pragmatique

  • `useMemo` et `useCallback` ne doivent pas être automatiques : mesurer avant d'optimiser.
  • Fixer un budget de bundle (ex: JS initial < 180 Ko gzip) pour éviter les dérives.
  • Ajouter Lighthouse CI pour bloquer les régressions de performance.
  • Tracer LCP, INP et CLS dans le temps pour piloter les gains réels.
Le code le plus écologique est celui qui fait le même travail avec moins d'éléments, moins de calculs et moins de données.

En pratique, les gains sont cumulatifs : un DOM plus simple, un React mieux mémoïsé et des assets plus légers améliorent à la fois performance, SEO et sobriété numérique.