React Performance Tracks (Chrome DevTools)

Définition

Depuis React 19.2 (1er octobre 2025), React ajoute ses propres pistes dans l'onglet Performance de Chrome DevTools : une piste Scheduler (priorité des travaux : blocking, transition, idle) et une piste Components (durée de rendu et d'effets par composant). Cela complète le Profiler React en situant le travail React dans la chronologie globale du navigateur (layout, peinture, réseau).

Analogie

Ajouter les voies « React » sur le plan du métro : on voit enfin où le train React s'arrête par rapport aux autres lignes.

Exemple de code

# 1. Application en mode développement (ou build avec profiling)
npm run dev
# 2. Chrome DevTools > Performance > Enregistrer > interagir > Stop
# 3. Pistes « Scheduler ⚛ » et « Components ⚛ » :
#    - Scheduler : Blocking / Transition / Idle, mises à jour et leur cause
#    - Components : Mount, Update, Effects par composant (durée, cascade)
# Astuce : nommer les transitions avec addTransitionType pour les retrouver

Cas d'usage

Diagnostiquer un rendu long ou une cascade d'effets, vérifier qu'une mise à jour lourde est bien en priorité Transition.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2025/10/01/react-19-2
• react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more