React
Explica qué valores son reactivos dentro de un Effect, cómo funciona el análisis de dependencias y cómo eliminar dependencias innecesarias sin engañar al linter.
Todo valor declarado dentro del componente y leído por un effect puede cambiar entre renders: props, estado y funciones locales.
useEffect(() => {
connect(roomId);
}, [roomId]);El array no es una lista de preferencias. Describe los valores reactivos usados por el effect.
React compara dependencias con Object.is. Objetos y funciones nuevos cambian por referencia.
const options = { roomId };Si options entra como dependencia, cambia en cada render. Mueve su creación dentro del effect o estabiliza el diseño.
Desactivar el linter puede congelar valores antiguos dentro del closure.
// Incorrecto: usa roomId pero declara []
useEffect(() => connect(roomId), []);useEffectEvent cuando corresponda.[] para imitar componentDidMount sin revisar valores usados.Las dependencias se deducen del código. Si no te gusta la lista, cambia la estructura del effect.
El array responde a una pregunta: ¿qué valores hacen que esta sincronización anterior deje de ser válida?
useEffect(() => {
const connection = connect(serverUrl, roomId);
return () => connection.disconnect();
}, [serverUrl, roomId]);Si cambia cualquiera, la conexión anterior corresponde a otra configuración y debe reemplazarse.
Son reactivos:
Un valor definido fuera del componente no cambia como consecuencia del render y normalmente no es dependencia:
const serverUrl = "https://example.com";Mover algo fuera es válido solo si realmente es constante para todas las instancias.
React compara cada entrada con Object.is:
Object.is(previousDependency, nextDependency)Strings y números se comparan por valor. Objetos, arrays y funciones por referencia.
const options = { roomId };
useEffect(() => connect(options), [options]);options es nuevo en cada render. Una solución simple:
useEffect(() => {
const options = { roomId };
return connect(options);
}, [roomId]);Ahora la dependencia expresa el dato real.
function createOptions() {
return { roomId };
}
useEffect(() => {
connect(createOptions());
}, [createOptions]);La función cambia por referencia. Antes de useCallback, pregunta si necesita existir fuera del effect. Moverla dentro suele simplificar:
useEffect(() => {
function createOptions() {
return { roomId };
}
return connect(createOptions());
}, [roomId]);Usa useCallback cuando la identidad estable también es parte de otro contrato, no solo para silenciar el linter.
Un effect que actualiza desde state puede evitar leerlo:
useEffect(() => {
const connection = subscribe((message) => {
setMessages((current) => [...current, message]);
});
return connection.unsubscribe;
}, []);El updater recibe el valor pendiente y messages no es una dependencia. Esto es correcto porque la sincronización no necesita reiniciarse cuando cambia la lista.
useEffect(() => {
const connection = connect(roomId);
connection.on("connected", () => {
showNotification(theme);
});
return () => connection.disconnect();
}, [roomId, theme]);Si cambiar tema no debería reconectar, separa esa lectura mediante useEffectEvent:
const onConnected = useEffectEvent(() => {
showNotification(theme);
});
useEffect(() => {
const connection = connect(roomId);
connection.on("connected", onConnected);
return () => connection.disconnect();
}, [roomId]);No muevas roomId al Effect Event: sí define la conexión y es reactivo.
useEffect(() => {
synchronize(user.id);
}, [user]);Si solo importa user.id, declarar esa propiedad expresa mejor la sincronización:
useEffect(() => {
synchronize(user.id);
}, [user.id]);No reduzcas dependencias si otras propiedades sí afectan el setup.
useEffect(() => connectChat(roomId), [roomId]);
useEffect(() => updateDocumentTitle(roomId), [roomId]);Aunque comparten dependencia, representan sistemas distintos. Separarlos permite que cada setup tenga su cleanup y evolución independiente.
Un loop común:
useEffect(() => {
setOptions({ theme });
}, [options, theme]);El effect crea un objeto nuevo, actualiza state, renderiza y cambia options otra vez. Pregunta si options puede derivarse durante render. La mayoría de loops revelan estado redundante o un effect innecesario.
[] significa que el effect no lee valores reactivos cambiantes. No significa literalmente “ejecutar una vez para siempre”:
// eslint-disable-next-line react-hooks/exhaustive-depsSolo debería aparecer con una justificación verificable y una API cuyo contrato el linter no puede inferir. En código de producto habitual, ocultar el warning crea stale closures.
useEffectEvent?[] no garantiza una única ejecución durante toda la aplicación?Object.is devuelve false.roomId.Cleanup, cancelación y race conditions muestra cómo invalidar correctamente cada ejecución cuando sus dependencias cambian.