如何不使用eslint-disable解决React useEffect缺依赖的exhaustive-deps警告

react-hooks/exhaustive-deps 规则做静态作用域分析时，不会因为你把逻辑封装成useEffect内部的局部函数就跳过依赖检查——只要函数调用链上引用了useEffect外层定义的响应式值（比如父组件传的prop、组件内的state），就会被判定为缺失依赖，这也是你明明没在外部调用socketData仍然收到警告的原因。 #

根据实际业务场景选择对应方案即可：

方案1：允许参数变化时重新初始化socket逻辑 #

如果roomID、sotreId是父组件异步从服务端拉取的参数，存在初始渲染时为默认值、后续更新为真实值的可能，把这些值加入依赖数组是最正确的选择，从根源上消除警告：

useEffect(() => {
    const socketData = () => {
        setReceiverID(sotreId);
        socketRef.current = socket;
        socketRef.current.emit('mobileNumber', roomID);
        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
          .then(stream => {
            backgroundVideo.current.srcObject = stream;
          })
          .catch((error) => {
            console.log("background error", error)
          });
        socketRef.current.on("yourID", (id) => setYourID(id));
        socketRef.current.on("allUsers", (users) => setUsers(users));
    }
    socketData();

    // 补充副作用清理逻辑，避免组件卸载/依赖更新时残留socket监听器造成内存泄漏
    return () => {
        if (socketRef.current) {
            socketRef.current.off("yourID");
            socketRef.current.off("allUsers");
            socketRef.current = null;
        }
    }
// 把useEffect内引用的所有响应式值全部纳入依赖
}, [roomID, sotreId, socket]);

• 为什么不会报警：所有useEffect回调内引用的响应式值都已经被加入依赖数组，完全符合规则的检查要求
• 额外收益：修复了异步参数的初始化bug——原代码的空依赖数组会导致父组件后续更新传过来的真实roomID、sotreId无法触发socket重新初始化，很容易出现连错房间、接收人ID错误的问题

方案2：参数全局恒定，不需要随更新重新执行初始化 #

如果明确知道roomID、sotreId在组件整个生命周期内只会传一次最终值、永远不会变化，可以通过useRef存储这些固定值，让useEffect内部通过ref读取值，绕开依赖追踪：

// 用ref存储固定不变的prop值
const roomIDRef = useRef(roomID);
const sotreIdRef = useRef(sotreId);

useEffect(() => {
    const socketData = () => {
        // 从ref读取值，ESLint不会把ref.current识别为需要加入依赖的响应式值
        setReceiverID(sotreIdRef.current);
        socketRef.current = socket;
        socketRef.current.emit('mobileNumber', roomIDRef.current);
        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
          .then(stream => {
            backgroundVideo.current.srcObject = stream;
          })
          .catch((error) => {
            console.log("background error", error)
          });
        socketRef.current.on("yourID", (id) => setYourID(id));
        socketRef.current.on("allUsers", (users) => setUsers(users));
    }
    socketData();

    return () => {
        if (socketRef.current) {
            socketRef.current.off("yourID");
            socketRef.current.off("allUsers");
            socketRef.current = null;
        }
    }
// 仅保留会实际变化的依赖即可
}, [socket]);

• 为什么不会报警：ESLint的exhaustive-deps规则只会追踪直接引用的响应式prop、state，ref的current属于稳定引用，不会被纳入依赖检查范围

很多开发者认为把逻辑封装成useEffect内部的局部函数就能绕开依赖检查，实际上该规则会递归追踪函数内部的变量引用链，只要最终指向了外层的响应式值，就会被识别为缺失依赖，和封装层级没有关系。

内容的提问来源于stack exchange，提问作者Mayank