React条件渲染卸载时useEffect清理函数不执行问题

我正在构建一个聊天组件，组件挂载时订阅WebSocket，卸载时应取消订阅。但当父组件通过条件渲染移除<ChatRoom />组件时，useEffect中的清理函数似乎未触发。

预期目标 #

当<ChatRoom />卸载时，取消WebSocket连接。

代码示例 #

function ChatRoom({ roomId }) {
    useEffect(() => {
      const socket = connectToRoom(roomId);
      console.log('subscribed:', roomId);

      return () => {
        console.log('unsubscribed:', roomId);
        socket.disconnect();
      };
    }, [roomId]);

    return <div>Room: {roomId}</div>;
  }

  function App() {
    const [show, setShow] = useState(true);
    return (
      <>
        <button onClick={() => setShow(s => !s)}>toggle</button>
        {show && <ChatRoom roomId="general" />}
      </>
    );
  }

预期结果 #

点击toggle按钮时，控制台应输出unsubscribed: general。

实际情况 #

仅在挂载时看到subscribed: general，清理日志从未出现，socket连接保持开启（已通过Network标签验证）。

已尝试操作 #

• 确认show状态确实切换为false（已在App中添加日志）
• 移除<StrictMode>以排除重复调用行为
• 确认connectToRoom返回包含disconnect()方法的对象

环境 #

• React 18.2.0
• Vite 5.0
• Chrome 122

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