React
Explica cómo useEffectEvent separa lógica no reactiva de un Effect para leer valores actuales sin convertirlos en dependencias que reinicien la sincronización.
A veces un effect debe reaccionar a una dependencia, pero necesita leer otros valores recientes sin reiniciar la sincronización.
const onConnected = useEffectEvent(() => {
showNotification("Conectado", theme);
});
useEffect(() => {
const connection = createConnection(roomId);
connection.on("connected", onConnected);
connection.connect();
return () => connection.disconnect();
}, [roomId]);El cambio de theme actualiza lo que lee el evento, pero no reconecta la sala.
Un Effect Event se llama desde effects o callbacks creados por ellos. No representa un evento directo del usuario.
No muevas dependencias realmente reactivas a un Effect Event para impedir que el effect se actualice.
roomId aunque sí define la conexión.useCallback.Separa la parte reactiva que inicia la sincronización de la lógica no reactiva que necesita leer valores recientes.
Un effect puede contener dos tipos de lógica:
function Chat({ roomId, theme }: Props) {
const onConnected = useEffectEvent(() => {
showNotification(`Conectado a ${roomId}`, theme);
});
useEffect(() => {
const connection = createConnection(roomId);
connection.on("connected", onConnected);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
}roomId define qué conexión existe. theme solo afecta cómo se presenta la notificación cuando ocurre el evento.
Un patrón anterior guardaba el último callback en una ref. Puede funcionar, pero oculta la intención y requiere actualización manual. useEffectEvent expresa que la función pertenece al effect, no es reactiva y siempre lee valores actuales.
<button onClick={handleBuy}>Comprar</button>Una interacción directa continúa usando un event handler normal. Effect Events se invocan desde effects o callbacks registrados por ellos, como eventos de socket, timers u observers.
Incorrecto conceptualmente:
const connectNow = useEffectEvent(() => connect(roomId));
useEffect(() => connectNow(), []);La conexión sí depende de roomId; moverla oculta el ciclo correcto. El effect quedaría conectado a una sala antigua.
Estas restricciones evitan convertirlo en un mecanismo global de callbacks “siempre actuales”.
function Metrics({ enabled, intervalMs, filters }: Props) {
const collect = useEffectEvent(() => {
sendMetrics(filters);
});
useEffect(() => {
if (!enabled) return;
const id = window.setInterval(collect, intervalMs);
return () => window.clearInterval(id);
}, [enabled, intervalMs]);
}Cambiar filtros modifica qué lee la siguiente captura, sin reiniciar el intervalo. Cambiar intervalMs sí recrea el timer porque define su configuración.
Pregunta por cada valor leído:
El primer grupo son dependencias. El segundo puede pertenecer a un Effect Event.
useEffectEvent depende de una versión compatible de React y del plugin actualizado de Hooks. En librerías o proyectos con versiones anteriores, documenta el requisito y no asumas disponibilidad universal.
useCallback, ref ni handler de usuario.theme puede vivir en un Effect Event de notificación?roomId debe seguir como dependencia?useCallback?useCallback estabiliza identidad según dependencias; Effect Event siempre lee valores actuales y no es reactivo.Refs como prop y useImperativeHandle cubre otra salida controlada para integrar capacidades imperativas.