useEffectEvent

Définition

Hook stable depuis React 19.2 (1er octobre 2025) qui extrait d'un effet la logique « événementielle » non réactive. La fonction retournée lit toujours les dernières props et états sans figurer dans le tableau de dépendances, ce qui évite de resynchroniser l'effet (reconnexion, redémarrage de timer) pour une valeur qui ne devrait pas le déclencher.

Analogie

Un interphone : la connexion reste ouverte (l'effet), mais le message diffusé (l'événement) est toujours le plus récent.

Exemple de code

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connecté !', theme); // lit le theme courant
  });

  useEffect(() => {
    const conn = createConnection(roomId);
    conn.on('connected', () => onConnected());
    conn.connect();
    return () => conn.disconnect();
  }, [roomId]); // ✅ theme absent : changer de thème ne reconnecte pas
}

Cas d'usage

Notifications, analytics ou logs déclenchés depuis un abonnement, un timer ou un WebSocket, dépendant de valeurs qui changent souvent.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2025/10/01/react-19-2
• react.dev/reference/react/useEffectEvent