在React setState回调中执行WebSocket消息发送是否正确？有何风险？

你的实现能跑通，但存在潜在问题 #

你的代码可以实现「发送WebSocket消息+更新本地状态」的需求，因为setState的函数式更新回调能拿到当前最新的state快照（messages参数），所以用messages.length生成消息序号是准确的，不会出现闭包导致的旧值问题。

但这种写法有几个需要注意的隐患：

• 职责耦合：把WebSocket发送（副作用逻辑）和状态更新绑定在一起，后续如果要调整状态更新逻辑，或者单独复用发送消息的逻辑，会变得很麻烦，不符合单一职责原则。
• 错误风险：如果sendMessage抛出错误（比如WebSocket连接中断），会直接中断setState的执行流程，导致本地状态没有更新——用户发了消息，但界面上看不到，体验很差。
• 测试不便：耦合的逻辑会增加测试难度，你很难单独测试状态更新或消息发送的逻辑，需要模拟更多依赖。

优化建议：分离状态更新与副作用 #

更符合React最佳实践的做法是把状态更新和WebSocket发送的逻辑分开，下面提供两种可行方案：

方案1：用useEffect监听状态变化发送消息 #

// 组件内部
useEffect(() => {
  // 只处理最新添加的本地消息
  const latestMsg = messagesData[messagesData.length - 1];
  if (latestMsg && latestMsg.user === LOCAL_USER && !latestMsg.ack) {
    try {
      sendMessage(latestMsg.number, latestMsg.body);
      // 可选：发送成功后标记消息已确认
      // setMessagesData(prev => prev.map(msg => 
      //   msg.number === latestMsg.number ? {...msg, ack: true} : msg
      // ));
    } catch (err) {
      console.error('消息发送失败:', err);
      // 这里可以添加用户提示，或者标记消息发送失败
    }
  }
}, [messagesData, sendMessage]);

const setLocalMessageData = (body: string) => {
  setMessagesData((prevMessages) => {
    const number = prevMessages.length;
    return [...prevMessages, {
      user: LOCAL_USER,
      number,
      body,
      ack: false
    }];
  });
};

方案2：先处理发送逻辑，再更新状态 #

如果不需要依赖状态更新的结果来发送消息，可以先生成消息数据，处理发送后再更新本地状态（注意添加错误捕获）：

const setLocalMessageData = (body: string, sendMessage: SendMessage) => {
  setMessagesData((prevMessages) => {
    const number = prevMessages.length;
    return [...prevMessages, {
      user: LOCAL_USER,
      number,
      body,
      ack: false
    }];
  });

  // 若需要严格依赖最新的消息序号，建议用方案1的useEffect实现
};

这两种方案都能避免耦合问题，同时错误处理更灵活，不会影响本地状态的正常更新。

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