2

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.
  • read about 'React.memo' from the react docs – ABDULLOKH MUKHAMMADJONOV Oct 08 '21 at 05:16
  • Where are you storing state? To ensure that only the components that change re-render you want to make sure the state that relates to them is stored within not in a higher level component. – sam-sjs Oct 08 '21 at 05:18
  • i read it it just helps when same data arrives it does not re render the element.Actually my problem is differenet my data always changes.so react memo is not helpful in this use case –  Oct 08 '21 at 05:18
  • @sam-sjs i am storing state in app component and passing it to (child) ciomponent. kindly eleaborate more how i can ensure not to redraw 10000 circles every time.only first time circle redraw then only we only changes the data on color of specific circle –  Oct 08 '21 at 05:22
  • If the state relates to the component then you should store it there and then use the useEffect hook to check state for when to update. – sam-sjs Oct 08 '21 at 05:34

0 Answers0