Se você já trabalhou em um projeto React por tempo suficiente, provavelmente já encarou aquele useEffect que começou simples e terminou parecendo uma gaveta de cabos antigos: funciona, mas ninguém tem coragem de mexer.
O React 19.2 trouxe alguns recursos interessantes, mas um dos mais úteis para o dia a dia é o useEffectEvent. Ele chega para resolver um problema bem comum: separar o que é realmente reativo dentro de um Effect do que é apenas uma função que precisa acessar valores atualizados.
O problema com alguns Effects
Imagine um componente que se conecta a uma sala de chat e mostra uma notificação usando o tema atual da interface.
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.on("connected", () => {
showNotification("Conectado!", theme);
});
connection.connect();
return () => {
connection.disconnect();
};
}, [roomId, theme]);À primeira vista, parece tudo certo. Mas existe um detalhe: se o usuário trocar o tema, o Effect roda de novo. Isso significa que a conexão pode ser refeita só porque a cor da interface mudou.
O roomId deve ser reativo, porque trocar de sala precisa recriar a conexão. Mas o theme só precisa estar atualizado quando a notificação aparecer. Ele não deveria obrigar o Effect inteiro a rodar de novo.
Onde entra o useEffectEvent?
Com useEffectEvent, você pode extrair essa lógica não reativa para uma função especial:
import { useEffect, useEffectEvent } from "react";
function ChatRoom({ roomId, theme }) {
const onConnected = useEffectEvent(() => {
showNotification("Conectado!", theme);
});
useEffect(() => {
const connection = createConnection("https://chat.example.com", roomId);
connection.on("connected", () => {
onConnected();
});
connection.connect();
return () => {
connection.disconnect();
};
}, [roomId]);
return <h1>Sala {roomId}</h1>;
}Agora o Effect depende apenas de roomId. Se o tema mudar, a função onConnected continua enxergando o valor mais recente, mas não força a reconexão.
A ideia não é usar menos Effects. É escrever Effects com responsabilidades mais claras.
Por que isso importa?
Durante muito tempo, a recomendação em React foi simples: se uma variável é usada dentro do Effect, coloque-a no array de dependências. Isso continua sendo uma boa regra geral, mas alguns casos misturam lógica reativa e não reativa no mesmo lugar.
O resultado costuma ser um destes dois problemas:
- o Effect roda mais vezes do que deveria;
- o desenvolvedor remove dependências manualmente e cria bugs difíceis de rastrear.
O useEffectEvent oferece um caminho mais explícito. Você continua respeitando as dependências do Effect, mas consegue separar callbacks que precisam acessar valores atuais sem transformar tudo em gatilho de reexecução.
Quando vale usar?
Esse recurso faz sentido quando você tem um Effect com uma parte claramente reativa e outra parte que só precisa ler o valor mais recente de alguma prop ou estado.
Alguns exemplos comuns:
- eventos de conexão com WebSocket;
- callbacks de analytics;
- notificações;
- listeners externos;
- integrações em que parte da lógica não deveria reiniciar o efeito principal.
Conclusão
O useEffectEvent não transforma Effects complicados magicamente em código limpo. Mas ele resolve uma dor real: aquela mistura estranha entre dependência legítima e valor que só precisa estar atualizado.
No fim, React 19.2 parece menos sobre inventar uma nova forma de escrever componentes e mais sobre arrumar pontos de atrito que todo mundo já conhecia.
Menos gambiarra no array de dependências. Mais intenção explícita no código.
