i am working on a project in which i am using a socket.io for real time data streaming.I have front end in react.My app component structure looks like this

<App>
    <Circle />
    <Component./>
    <........./>
</App>

my app component is receiving data over socket.io and passing it to child component .Like this

        <CircleC dataS={dataS}  dataC={dataC}/>

• dataS is 10000 length array
• dataC is also 10000 length array

and these array also changes after 100milisecond.mean i am receiving 2 arrays of 10000 records after every 100 millisecond in real time.
This is my Circle Component

return (
<div className="show-data" onWheel={onWheelHandler}>
{
   
    dataS.map((item,id)=>(

        <button className="wave-circle" style={{ backgroundColor: "grey",padding:pad }} key={id}>{id}</button>
        :    dataC[id]==1?
        <button className="wave-circle" style={{ backgroundColor: "green",padding:pad }} key={id}>{id}</button>
        :    dataC[id]==2?
        <button className="wave-circle" style={{ backgroundColor: "yellow",padding:pad }} key={id}>{id}</button>
        :    spike[id]==3?
        <button className="wave-circle" style={{ backgroundColor: "cyan",padding:pad }} key={id}>{id}</button>
        :       <button className="wave-circle" style={{ backgroundColor: "purple",padding:pad }} key={id}>{count}</button>
    
        ))

. Problems i am facing.

• Every time data Changes/new data arrives.All the UI Elements(circle html) redraw again(i think so). -What we can do to avoid re-drawing of UI .only data within these elements should be display i ONLY WANT TO know how we can draw UI only one time and then when new data arrives only content or styling change .Cicrle or UI should not be redrawn.