Recharts slow rendering issue - reactjs

Question

import React, { useState, useEffect } from "react";
import './App.css';
import {
Line,
LineChart,
XAxis,
YAxis,
} from 'recharts';
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://localhost:4001";
function App() {
const [data, updateData] = useState([]);
const socket = socketIOClient(ENDPOINT, {
transports: ['websocket', 'polling']
});
useEffect(() => {
socket.on("a", a => {
updateData(currentData => [...currentData, a])
});
}, []);
if(data.length>200)
{
updateData(data.shift())
}
return (
<div className="App">
<h1>size of data is :- {data.length}</h1>
<LineChart width={1000} height={500} data={data}>
<XAxis dataKey="name" />
<YAxis />
<Line dataKey="value" />
</LineChart>
</div>
);
}
export default App;
This is my code I am getting maximum of 200 data per second from socket.io .Code is working fine but as some time passes it start lagging , graph rendering becomes slow .
can any one please tell how can I fix it or optimize it .

Answer 1

There is an anti pattern here, you are calling data.shift() which directly modifies the state, which is a no no.
The other issue is your length check is outside the useEffect.
Instead, use Array.slice() like this:
import React, { useState, useEffect, useMemo } from 'react';
import './App.css';
import { Line, LineChart, XAxis, YAxis } from 'recharts';
import socketIOClient from 'socket.io-client';
const ENDPOINT = 'http://localhost:4001';
function App() {
const [data, updateData] = useState([]);
const socket = socketIOClient(ENDPOINT, {
transports: ['websocket', 'polling'],
});
useEffect(() => {
socket.on('a', (a) => {
updateData((currentData) => {
const a = [...currentData, a];
return a.length <= 200 ? a : a.splice(1);
});
});
}, []);
const graph = useMemo(() => {
return (
<LineChart width={1000} height={500} data={data}>
<XAxis dataKey='name' />
<YAxis />
<Line dataKey='value' />
</LineChart>
)
}, [data]);
return (
<div className='App'>
<h1>size of data is :- {data.length}</h1>
{graph}
</div>
);
}
export default App;