I'm sorry for not being good at English.
Using the KendoUI React demo, I've encountered a weird issue with the bar charts. I gave each chart an interval of 3, 5, or 10 seconds, intending that each one refreshes by 3 seconds, 5 seconds, and 10 seconds. But when I turn on the dev mode and confirm it, the charts refresh together every second the other chart does.
FYI, This code is to be child components into a map of the parent component, so I cannot divide that component by each page. I hope to get a good answer to this situation.
pages/disk-index
import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
import Disk from './disk';
export default function Home() {
const intervalDisk = useRef(null);
const diskData1 = [{ categoryField: 'root', value: 40, color: 'blue' }];
const [diskData1State, setDiskData1State] = useState(diskData1);
const isClient = typeof window === 'object';
useEffect(() => {
if (isClient) {
intervalDisk.current = setInterval(() => {
diskData1[0].value = Math.floor(Math.random() * 100);
// console.log(new Date() + ', ' + diskData1[0].value);
setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
}, 10000);
return () => clearInterval(intervalDisk.current);
}
}, []);
return (
<>
<Disk diskId="1" interval="3000" />
<Disk diskId="2" interval="5000" />
<div id="diskDataId2">
<Chart
style={{
width: '90%',
height: '85%',
position: 'center center',
}}
>
<ChartTooltip />
<ChartSeries>
<ChartSeriesItem
type="bar"
stack={{
type: 'normal',
}}
gap={2}
spacing={0.35}
categoryField="categoryField"
colorField="color"
data={diskData1}
tooltip={true}
/>
</ChartSeries>
</Chart>
</div>
</>
);
}pages/disk
import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
export default function Disk(props) {
console.log(JSON.stringify(props));
const intervalDisk = useRef(null);
const diskData1 = [{ categoryField: 'root', value: 40, color: 'red' }];
const [diskData1State, setDiskData1State] = useState(diskData1);
useEffect(() => {
intervalDisk.current = setInterval(() => {
diskData1[0].value = Math.floor(Math.random() * 100);
// console.log(new Date() + ', ' + diskData1[0].value);
setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
}, Number(props.interval));
return () => clearInterval(intervalDisk.current);
}, [diskData1State]);
return (
<>
<div id={'diskData' + props.diskId}>
<Chart
style={{
width: '90%',
height: '85%',
position: 'center center',
}}
>
<ChartTooltip />
1 Answer, 1 is accepted
Hi Jaeyeon,
Thank you for reaching out to us.
The behavior that you are describing with the Chart is expected and it is documented in the following help article, where you will also find how to prevent the rendering on each change in the state:
I have modified the example that you have shared, so it can update only the first Chart (the second can be updated with some condition):
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.