Tag: redraw

I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.

kinesisReadInterval.current = setInterval(async () => {
        const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
        recordsResponse.Records.forEach(record => {
            try {
                const dataObj = JSON.parse(record.Data.toString('utf-8'));
                spectrumAnalyzerRef.current.metaDataHandler(dataObj);
            } catch (jsonError) {
                spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
            }
        });

        shardIterator = recordsResponse.NextShardIterator;

        if (!shardIterator || !kinesisConected.current) {
                clearInterval(intervalId); // Stop interval if conditions are not met
        }
    }, 1000);

The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?