Reactjs 如何使用 socket.io 处理同步的 React 状态更新

考虑到以下功能组件:

const DataLog: FC = (props) => {
  const [events, setEvents] = useState<string[]>([]);

  const pushEvent = (event: string) => {
    const updatedEvents = [...events];
    updatedEvents.push(event);
    setEvents([...updatedEvents]);
  };

  useEffect(() => {
    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
      'http://localhost:9000'
    );

    socket.on('connect', () => {
      console.log('Web socket connected');
    });

    socket.on('event1', (event: string) => {
      pushEvent(event);
    });

    socket.on('event2', (event: string) => {
      pushEvent(event);
    });
  }, []);

  return (
    <div>
      {events.map((event: string, index: number) => {
        return <div key={index}>{event}</div>;
      })}
    </div>
  );
};

export default DataLog;

每次通过套接字接收到event1或event2消息时，我都要更新events状态变量.io websocket连接.如果消息以合理的间隔传入，这可以正常工作，但当event1和event2或多条event1或event2消息以非常快的速度传入时，问题就会出现.在处理下一个事件之前，状态更新没有足够的时间完成，导致events数组被最后一次调用setEvents覆盖.有没有办法确保每个新消息都被添加到events状态对象中？我需要手动批处理状态更新吗？有没有另一个钩子可以用来保存更新之间的状态？