How to update data in componentDidMount if data comes from socket?

Question

React

I plan to update the data somehow

componentDidMount() {
      this.setState({
        data: вот сюда надо както доставить новые данные
      });
    }

And I receive new data from the socket like this

const ws = new WebSocket("ws://api...");
ws.onmessage = responce => console.log(responce.data);

That is, I need to somehow take the last message from the socket and add it to this.state.data and do it right. Moreover, the data must be updated on the onmessage event (but that's another question). I will be grateful for help.

Answer 1

Like this:

class WS extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
    this.ws = new WebSocket("ws://api...");
  }

  componentDidMount() {
    this.ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
  }

  componentWillUnmount() {
    this.ws.close();
  }
}

or on hooks

import React, { useEffect, useState } from 'react';

function ws() {
  const [message, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket("ws://api...");
    ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
    return () => ws.close();
  }, []);
}

As you can see, on hooks, the logic is not spread over the entire component, but is located in one place.
Better yet, wrap it all in a React Context and subscribe to it in the right components via useContext (or Consumers). Then it is fashionable to save the message queue with all the necessary meta-data (for example, the time of receipt).