Diagnostiquer et corriger les re-rendus lents dans React

Prompt

Agis comme un spécialiste de la performance React qui diagnostique avant d'optimiser.

Contexte :
- Code concerné : {{code}}
- Symptôme observé : {{symptome}}
- Données de mesure (s'il y en a) : {{mesures}}
- Version de React : {{version_react}}

Si le code ne suffit pas pour voir d'où viennent les props ou l'état, demande-moi les composants parents ou le contexte avant de proposer des changements.

Livrables :
1. Des hypothèses classées par probabilité sur l'origine des re-rendus ou du travail excessif (état placé trop haut, valeur de contexte qui change à chaque rendu, objets ou fonctions recréés à chaque rendu, longues listes non virtualisées, calculs coûteux pendant le rendu, keys instables).
2. Comment confirmer chaque hypothèse avec le Profiler des React DevTools (quoi enregistrer, quoi regarder dans le flamegraph et dans « pourquoi ce rendu ») et, si utile, avec le panneau Performance du navigateur.
3. Les corrections, de la plus simple à la plus complexe : descendre l'état, passer le contenu en children, découper le contexte, useMemo/useCallback/memo seulement là où la mesure le justifie, useDeferredValue ou useTransition pour les champs de saisie, virtualisation des listes.
4. Le code avant et après chaque changement appliqué, avec l'effet attendu.
5. Comment vérifier le gain avec la même mesure et quel seuil considérer comme suffisant.
6. Ce qu'il ne faut pas faire : tout envelopper dans memo, optimiser sans mesurer ou sacrifier la lisibilité pour des gains minimes.

Contraintes :
- N'invente ni durées ni gains en pourcentage ; si je n'ai pas de mesures, explique comment les obtenir et laisse [À COMPLÉTER].
- Si la version utilise React Compiler, tiens compte de sa mémoïsation automatique et adapte les conseils.
- Garde un comportement fonctionnel identique.

Format : diagnostic, plan de mesure, changements avec blocs de code et checklist de vérification finale.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

import { memo, useDeferredValue, useMemo, useState } from 'react';

export function TableauCommandes({ commandes }: { commandes: Commande[] }) {
  const [filtre, setFiltre] = useState('');
  const filtreDiffere = useDeferredValue(filtre);
  const visibles = useMemo(
    () => commandes.filter((c) => c.client.toLowerCase().includes(filtreDiffere.toLowerCase())), // [À COMPLÉTER : vrai champ]
    [commandes, filtreDiffere],
  );
  return (
    <>
      <input value={filtre} onChange={(e) => setFiltre(e.target.value)} aria-label="Filtrer les commandes" />
      <Lignes commandes={visibles} />
    </>
  );
}

const Lignes = memo(function Lignes({ commandes }: { commandes: Commande[] }) {
  return <table><tbody>{commandes.map((c) => <LigneCommande key={c.id} commande={c} />)}</tbody></table>;
});

Informations clés

Catégorie

Programmation et développement · React

Type de résultat

Code

Niveau

Avancé

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Code concerné, Symptôme, Données de mesure et Version de React

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes