How to work with dynamic data?

Question

React

I'm trying to figure out the d3js + react library. Namely, the question of working with dynamic data. Here is the function that receives the data

......
export function getData() {
  const promiseMSFT = fetch("https://......tsv")
    .then(response => response.text())
    .then(data => tsvParse(data, parseData(parseDate)))
  return promiseMSFT;
}
......

And here is the component that renders the graph using this data

import { getData } from "./getdata"
......
class ChartComponent extends React.Component {
  /*componentDidMount функция вызывается после рендеринга компонента*/
  componentDidMount() {
    getData().then(data => {
      /* setState - для асинхронного обновления данных? */
      this.setState({ data })
    })
  }
  render() {
        ...

As far as I understand, the graph is based on the data obtained in the form of an object. But what if I need to give live data, for example, through sockets? I would be grateful for hints and ideas. I don't even know how to approach this problem. If, for example, I give data every minute, how can I not lose the old data and add new ones? I don't even know where to start.

Answer 1

How can I not lose the old data and add new ones

this.setState({ data: [ ...this.state.data, ...newData ] })
// новый массив [ старые данные + новые данные ]