useEffectEvent

React 🟡 Mid

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

S'en servir pour « faire taire » exhaustive-deps sur une vraie dépendance, ou passer l'Effect Event à un composant enfant (interdit par le lint).

Termes liés

#hooks#react19#interview

En entretien

Explique-moi à quoi sert useEffectEvent.
C'est un 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. Ça évite de resynchroniser l'effet, par exemple reconnecter un WebSocket, pour une valeur comme le thème qui ne devrait pas le déclencher.
Quel est le piège avec useEffectEvent ?
S'en servir pour faire taire exhaustive-deps sur une vraie dépendance, ou passer l'Effect Event à un composant enfant, ce qui est interdit par le lint. Il sert précisément aux notifications, analytics ou logs déclenchés depuis un abonnement ou un timer.

Sources

Fiche mise à jour le 2026-09-27