React 19.2 : Activity, useEffectEvent et Performance Tracks

Introduction

React 19.2 introduit des primitives qui ciblent deux besoins concrets : prioriser l UI visible et comprendre pourquoi une interaction devient lente. Activity et useEffectEvent adressent le rendu et les listeners. Les Performance Tracks aident a diagnostiquer les goulots.

Activity : pre-render sans bloquer

Activity permet de pre-render des sous-arbres non visibles ou non prioritaires, tout en gardant la UI principale fluide. C est utile pour les tabs, drawers ou pages prechargees.

1// Concept : pre-renderer un panel non visible
2import { Activity, useState } from 'react';
3
4export function SettingsTabs() {
5  const [tab, setTab] = useState<'profile' | 'billing'>('profile');
6
7  return (
8    <div>
9      <button onClick={() => setTab('profile')}>Profil</button>
10      <button onClick={() => setTab('billing')}>Facturation</button>
11
12      <Activity mode={tab === 'profile' ? 'active' : 'hidden'}>
13        <ProfilePanel />
14      </Activity>
15
16      <Activity mode={tab === 'billing' ? 'active' : 'hidden'}>
17        <BillingPanel />
18      </Activity>
19    </div>
20  );
21}

useEffectEvent : listeners stables

useEffectEvent permet d ecrire des listeners qui lisent les props et state recents sans re-installer l effet. C est parfait pour les events globaux (scroll, resize, analytics).

1import { useEffect, useEffectEvent, useState } from 'react';
2
3export function ScrollTracker() {
4  const [count, setCount] = useState(0);
5
6  const onScroll = useEffectEvent(() => {
7    setCount((c) => c + 1);
8  });
9
10  useEffect(() => {
11    window.addEventListener('scroll', onScroll, { passive: true });
12    return () => window.removeEventListener('scroll', onScroll);
13  }, []);
14
15  return <p>Scroll events: {count}</p>;
16}

Performance Tracks : lire les traces

Les Performance Tracks dans React DevTools exposent les phases de rendu, les commits et les transitions. Utilisez-les pour isoler le composant ou la phase qui provoque une latence perceptible.

Checklist adoption

Conclusion

React 19.2 fournit des outils pour mieux prioriser le rendu et mieux diagnostiquer les lenteurs. Utilises avec mesure, Activity et useEffectEvent peuvent rendre une UI plus fluide et plus previsible.