title: Recharts slow rendering issue
body: <pre><code>
  import React, { useState, useEffect } from &quot;react&quot;;
  import './App.css';
  import {
    Line,
    LineChart,
    XAxis,
    YAxis,
  } from 'recharts';
  
  import socketIOClient from &quot;socket.io-client&quot;;
  const ENDPOINT = &quot;http://localhost:4001&quot;;
  function App() {
    const [data, updateData] = useState([]);
    const socket = socketIOClient(ENDPOINT, {
      transports: ['websocket', 'polling']
    });
    useEffect(() =&gt; {
        socket.on(&quot;a&quot;, a =&gt; { 
          updateData(currentData =&gt; [...currentData, a])
         });
    }, []);
    if(data.length&gt;200)
    {
      updateData(data.shift())
    }
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;size of data is :- {data.length}&lt;/h1&gt;
       &lt;LineChart width={1000} height={500} data={data}&gt;
          &lt;XAxis dataKey=&quot;name&quot; /&gt;
          &lt;YAxis /&gt;
          &lt;Line dataKey=&quot;value&quot; /&gt;
        &lt;/LineChart&gt;
    &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>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 .</p>
  <p>can any one please tell how can I fix it or optimize it .</p>