Plot real time data

plotly.js
1

I need to plot real-time data fetched from an API. To simplify this, I’ve set up a function using setInterval to update my data list every second. However, I’m facing an issue where the plot component keeps re-rendering, causing everything to reset. For instance, if I select a tool from the toolbar, the selection resets upon re-render. Similarly, zooming in results in zooming out again after re-rendering. I feel stuck and have been struggling with this for a while. Any assistance would be greatly appreciated.
ps: if the plot component doesn’t re-render it won’t get updated when the data arrives.

import React, { useEffect, useRef } from "react";
import Plot from "react-plotly.js";
import Plotly from "plotly.js-dist";
import cloneDeep from "lodash/cloneDeep"; // Using lodash for deep copying

const GenericPlot = (props) => {
  const plotRef = useRef(null);

  useEffect(() => {
    if (plotRef.current) {
      const dataCopy = cloneDeep(props.data);
      const layoutCopy = cloneDeep(props.layout);
      const configCopy = cloneDeep(props.config);

      Plotly.react(plotRef.current.el, dataCopy, layoutCopy, configCopy);
    }
  }, [props.data, props.layout, props.config]);

  return (
    <Plot
      ref={plotRef}
      data={props.data}
      layout={props.layout}
      config={props.config}
    />
  );
};

export default GenericPlot;
2
3

thank you that fixed it, I have another problem is when a new data come the ticks on the xaxis and yaxis keep blinking, I believe it may be a problem of auotranging because when I zoom it stops blinking, how can I fix that ?