Bug RCP React : les 5 causes invisibles de re-renders

Bug RCP (React Component Props) : les 5 causes invisibles

"Bug RCP" = comportement inattendu causé par les props React (re-renders, références instables, closures stale). Invisibles en dev, critiques en prod.

Cause 1 : objet/array recréé à chaque render

// ❌ {} recréé à chaque render → useEffect tourne en boucle
<Foo config={{ enabled: true }} />

// ✅ référence stable
const config = useMemo(() => ({ enabled: true }), []);
<Foo config={config} />

Cause 2 : fonction inline dans deps

useEffect(() => fn(), [fn]) où fn est définie inline → boucle infinie. Solution : useCallback ou sortir la fonction du composant.

Cause 3 : closure stale dans setInterval/setTimeout

useEffect(() => {
  const id = setInterval(() => console.log(count), 1000);
  return () => clearInterval(id);
}, []); // count n'est jamais à jour

Solution : ref qui pointe la valeur courante, OU dépendance [count] (et clear/recreate).

Cause 4 : key manquante ou instable dans .map()

key={Math.random()} ou key={index} sur liste qui change → React remonte les composants → perte state interne, bugs visuels.

Solution : key={stable.id}.

Cause 5 : state dérivable mis en state

// ❌ state dérivable
const [fullName, setFullName] = useState(`${first} ${last}`);
useEffect(() => setFullName(`${first} ${last}`), [first, last]);

// ✅ dérivé direct
const fullName = `${first} ${last}`;

Détecter : React DevTools Profiler

Highlights re-renders. Tout composant qui re-render sans changement de props utiles = candidat refacto. React.memo + useMemo ciblés (pas partout).

Anti-pattern : memo partout

React.memo sur tout = coût > gain. À réserver aux composants : (1) coûteux à render, (2) qui re-render souvent inutilement. Profiler avant d'optimiser.