Reactjs 在使用类not hook时，如何防止在React上使用套接字时重新渲染。如何防止多重设置状态

在使用类not hook时，如何防止在React上使用套接字时重新渲染。如何防止多重设置状态。

如果使用类组件，则需要使用生命周期方法

组件将卸载
清除与套接字的连接。就像这里：

  componentDidMount() {
     this.socket = io(socketUrl());
     this.socket.on('connect', () => {
         this.socket.emit('authentication',
            { token: localStorage.getItem(`Bearer`) })
    });
    
      this.socket.on('track_payload', data => {
         let markers = [...this.state.markers];
         this.setState({markers:data.payload} )
     });
 }

我断开了插座，但它根本不工作。
componentWillUnmount() {
  this.socket.close();
}