Any State Changes triggers re render and loss of data

[Dovul]

    > Seems like even i am getting the same issue. I am updating the data set on button click. Every time the button is clicked the old data is lost and it plots from the latest value. import React, { useRef, useState } from "react";

`import React, { useRef, useState } from "react";

import "./App.css"; import { Line, Chart } from "react-chartjs-2"; import "chartjs-adapter-luxon"; import StreamingPlugin from "chartjs-plugin-streaming";

Chart.register(StreamingPlugin);

function App() { const [val, setVal] = useState(0); const buttonHandler = () => { setVal(val + 3); };

const onUpdateData = (chart) => { const now = Date.now(); chart.data.datasets[0].data.push({ x: now, y: val }); chart.update("quiet"); }; return (

Click here to update data <Line data={{ datasets: [ { label: "Dataset 1", backgroundColor: "rgba(255, 99, 132, 0.5)", borderColor: "rgb(255, 99, 132)", borderDash: [8, 4], fill: true, data: [], }, ], }} options={{ scales: { x: { type: "realtime", realtime: { duration: 20000, refresh: 1000, delay: 2000, onRefresh: onUpdateData, }, }, y: { title: { display: true, text: "Value", }, }, }, interaction: { intersect: false, }, }} />

); } export default App; `

Yes, no matter what state changes on the page the chart resets. I still cant seem to figure it out.... for testing I'm setting the pause property with a click of a button. The streams pauses but the data is being reset

Originally posted by @arendeutsch in https://github.com/nagix/chartjs-plugin-streaming/issues/134#issuecomment-1069046817

[Dovul]

Update: so the problem above happens when the state in any parent component changes. Not just any state.

[Dovul]

Update: Solve this problem. Any controls of the chart should be in the child component. Or you can use useRef, useImperativeHandle and forwardRef method.

I'm sorry for bothering. I am still very amateur at web development and React. Thank you for this library :)