Component update in React via websocket

Question

Hello,

I have a component in React that connects to a websocket with the following parameters (NUM_ITEMS=100, MSGS_PER_SECOND=100). Therefore, I list a table with 100 items and update them by ID to the media that the new ones will arrive. However, when these two parameters are changed to 1000, my application hangs, not by receiving the 1000 messages, but in an attempt to update.

Looking at other threads, I saw that one solution would be to queue the messages and process them one at a time. Then I tried to do it this way (it works with the values in 100), but in 1000 it keeps crashing. Could someone tell me a correct way to do this? Detail: I can’t page or change the websocket.

constructor(props){
    super(props);

    this.state = {
      data: [],
      messages: []
    }
  }

  componentWillUpdate(){
    this.interval = setTimeout(() => {
      let messages = [...this.state.messages];
      let jsonData = messages.map(msg => {
          let message = JSON.parse(msg);
          return message;
      });

      if(jsonData){
        jsonData.map(nextMsg => {
          const cur = this.state.data;
          const idx = cur.findIndex(el => el.id === nextMsg.id);
          if(idx != -1){
            cur[idx] = nextMsg;
          }
          else{
            cur.push(nextMsg);
          }
          cur.sort((a, b) => { return (a.value > b.value) ? 1 : -1 });
          this.setState({data: cur});
        })
        let reducedMsgs = [...this.state.messages];
        reducedMsgs.splice(0, messages.length);
        this.setState({ messages: reducedMsgs });
      }
    }, 10);
    console.log(this.state.messages.length)
  }

  componentDidUpdate() {
    setTimeout(this.interval);
  }

  handleOpen = () => {
    this.refWebSocket.sendMessage('init');
  }

  handleData = (data) => {
    let messages = [...this.state.messages];
    messages.push(data);
    this.setState({messages})
  }

  render() {
    return (
      <div>
        <Websocket 
          url='ws://localhost:7770'
          onMessage={this.handleData}
          onOpen={this.handleOpen}
          ref={Websocket => {
            this.refWebSocket = Websocket;
          }}/>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>ID</th>
              <th>Value</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {this.state.data.map(row => {
              return (
                <tr>
                  <td>{row.id}</td>
                  <td>{row.value}</td>
                  <td>{row.name}</td>
                </tr>
              )
            })}
          </tbody>
        </Table>
      </div>
    )
  }

This is my component. The function handleDataqueue messages in state messages. In the method componentWillUpdateI’m trying to make the updates, but hangs when it gets to receive 1000 items in 1000 messages per second.

Thank you in advance for your cooperation.

Answer 1

I think your application is crashing because you have one setState within a loop, this: jsonData.map(....., instead of setting the state all the time(in the loop), put in a variable for now(in the loop), when the loop ends calls the setState.