如何规避React中useEffect的missing dependency缺失依赖警告

你当前代码的问题在于message事件回调中直接引用了组件顶层的messages状态，首次渲染后messages更新时，回调里拿到的始终是初始的空数组，会导致后续消息覆盖旧消息的bug，同时ESLint检测到你引用了外部的messages变量，才会弹出依赖缺失的警告。

你需要使用状态的函数式更新写法，彻底移除对外部messages变量的依赖，同时补充useEffect的清理逻辑避免内存泄漏、重复连接问题，修改后的代码如下：

useEffect(()=>{
    console.log('bruh');

    socket.current = io('http://0.0.0.0:3001');
    
    socket.current.on('connect', ()=> {
        console.log('socket connection status: ' + socket.current.connected);
        socket.current.emit('enter-room', getRoomId(window.location.pathname));
    });
    socket.current.on('message', m => {
        console.log('message received: ' + JSON.stringify(m));
        // 函数式更新直接拿最新的状态，不需要依赖外部的messages
        handleMessages(prevMessages => [...prevMessages, m]);
    });
    // 组件卸载时清理socket连接和事件监听
    return () => {
        socket.current?.off('connect');
        socket.current?.off('message');
        socket.current?.disconnect();
    }
}, []);

这个写法没有引用任何外部的状态/变量，依赖数组可以保持为空，只会在组件首次挂载时执行一次socket初始化，完全符合你的需求，也符合React Hook的规范，正常情况下ESLint不会再报警告。

• 先检查回调逻辑的所有位置是否都没有用到messages变量，确保函数式更新写法正确
• 重启IDE的ESLint服务，清除缓存后重新校验
• 确认逻辑没有问题后如果仍有误报，可以在依赖数组行上方加// eslint-disable-next-line react-hooks/exhaustive-deps注释手动忽略警告，这个场景下的忽略是安全的。

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