ReactJS+Websocket+Context出现最大更新深度超限问题求助

问题原因分析 #

1. Provider值不稳定：原代码中ws.current?.send.bind(ws.current)每次组件渲染都会生成新的函数引用，导致Provider的value频繁变化，触发消费组件不必要的重渲染，长期积累后引发更新深度警告。
2. 重连时旧连接未清理：WebSocket断开重连时，旧连接未主动关闭，可能仍在发送消息，重复触发setMessage，加剧更新频率。
3. 高频消息无限制更新：600+流水线的场景下，短时间内可能收到大量实时消息，每次都直接调用setMessage，导致React更新队列积压，触发更新深度限制。

具体解决方案 #

1. 稳定Provider的value引用 #

使用useCallback缓存send函数，避免每次渲染生成新的函数引用，同时在重连时主动关闭旧连接：

export function WebsocketProvider({children}) {
    const [message, setMessage] = useState(null);
    const [isReady, setIsReady] = useState(false); 

    const ws = useRef(null);
 
    // 用useCallback缓存send函数，确保引用稳定
    const send = useCallback((data) => {
        ws.current?.send(data);
    }, []);

    const connect = () => {
        // 重连前关闭旧连接，避免重复接收消息
        if (ws.current) {
            ws.current.close();
            ws.current = null;
        }
        
        ws.current = new WebSocket(PIPELINE_WEBSOCKET_URL);
        
        ws.current.onerror = (event) => {  
            console.error('WebSocket连接错误:', event);
        };
        
        ws.current.onopen = () => {
            console.log(`[${getTimestamp()}] 连接到WebSocket服务器: ${PIPELINE_WEBSOCKET_URL}`);
            setIsReady(true);
        };

        ws.current.onclose = () => {
            console.log(`[${getTimestamp()}] WebSocket连接关闭`);
            setIsReady(false);
            setTimeout(connect, WEBSOCKET_RECONNECT_DELAY);
        }; 

        ws.current.onmessage = (event) => {
            const newMessage = JSON.parse(event.data);
            // 可选：仅当消息内容变化时更新，避免重复触发状态更新
            if (JSON.stringify(newMessage) !== JSON.stringify(message)) {
                setMessage(newMessage);
            }
        };
    };

    useEffect(() => {
        connect();
        // 组件卸载时主动关闭连接
        return () => {
            if (ws.current) {
                ws.current.close();
                ws.current = null;
            }
        };
    }, []); 

    // 使用缓存后的send函数，确保Provider的value引用稳定
    const ret = [isReady, message, send];
 
    return (
        <WebsocketContext.Provider value={ret}>
            {children}
        </WebsocketContext.Provider>
    );
} 

export default WebsocketContext;

2. 对高频消息做节流处理 #

针对大量流水线的实时消息，使用节流函数限制setMessage的调用频率，避免短时间内过多状态更新：

import { throttle } from 'lodash';

// 在WebsocketProvider内部添加节流处理
const handleMessage = useCallback(throttle((newMessage) => {
    setMessage(newMessage);
}, 100), []); // 100毫秒内只处理一次消息

// 修改onmessage回调
ws.current.onmessage = (event) => {
    const newMessage = JSON.parse(event.data);
    handleMessage(newMessage);
};

3. 优化子组件的状态更新逻辑 #

使用Immer简化状态更新，减少不必要的对象复制，降低内存开销和更新频率：

import { produce } from 'immer';

export default function ParentPipelineDashboard() {
    const [groupedPipelineObjects, setGroupedPipelineObjects] = useState({});
    const [isReady, message, send] = useContext(WebsocketContext); 

    useEffect(() => {
        if (message) {
            updatePipelineTypeObjects(message);
        }
    }, [message]); 

    const updatePipelineTypeObjects = (data) => {
        try {
            const pipelineName = data.pipelineName;
            const pipelineGroup = data.pipelineGroupName;           
            setGroupedPipelineObjects(prevState => produce(prevState, draft => {
                // 直接修改draft，Immer会自动生成新的不可变状态
                if (!draft[pipelineGroup]) {
                    draft[pipelineGroup] = {};
                }
                draft[pipelineGroup][pipelineName] = data;
            }));
        } catch (error) {
            console.error('更新流水线状态失败:', error);
        }
    };

    // ... 其他组件逻辑
}

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