Estoy trabajando en un proyecto en el que estoy usando un socket.io para la transmisión de datos en tiempo real. Tengo un front-end en reaccionar. La estructura del componente de mi aplicación se ve así

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

el componente de mi aplicación recibe datos a través de socket.io y los pasa al componente secundario. Así

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

• dataS es una matriz de 10000 longitudes
• dataC también es una matriz de 10000 longitudes

y esta matriz también cambia después de 100 milisegundos. Significa que estoy recibiendo 2 matrices de 10000 registros después de cada 100 milisegundos en tiempo real.
Este es mi componente de círculo

 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> ))

. Problemas que estoy enfrentando.

• Cada vez que llegan cambios de datos/nuevos datos. Todos los elementos de la interfaz de usuario (círculo html) se vuelven a dibujar (creo que sí). -Qué podemos hacer para evitar volver a dibujar la interfaz de usuario. Solo se deben mostrar los datos dentro de estos elementos . SOLO QUIERO saber cómo podemos dibujar la interfaz de usuario solo una vez y luego, cuando lleguen nuevos datos, solo cambie el contenido o el estilo. Circular o la interfaz de usuario debe no ser redibujado.