CODEWITHSUNDEEP
javascriptreactjswebsocket
Cm1602
Cm1602

Reputation: 91

When updating data from websockets, how can I update individual child components without socketing to every child?

So I have a frontend that needs to be updated with certain data every 2-ish seconds. Currently I have it set up so that my frontend sends a init message over a websocket to my backend. Upon receiving this, the backend starts an interval to send the data every 2 seconds until it receives a clear message to clear the interval.

I see two options:

  1. I can set up a socket at the layer where each slice of data is needed and apply it to state, so that when the polled data changes, so does state, and therefore the component.

  2. I can set up a socket with all the data at the top layer and pass the data down through props to my child components.

Option 1 would mean I'm setting up and handling a lot of sockets, which is undesirable.

Option 2 is my preferred option, but I'm a little uneducated on how to pull this off while keeping this app performing well. I don't want to update the entire page every time one piece of data changes if everything is held in state at the top layer. Can I set this up so that if data x changes but data y doesn't, then only the component that has data x passed to its props gets changed?

Upvotes: 1

Views: 798

Answers (1)

Patrick Roberts
Patrick Roberts

Reputation: 51886

Option 3. You can set up a socket with all the data in a context provider at the top layer and subscribe to each slice of data from context consumers. To do this you'll need to learn about contexts. However, I recommend checking out Redux because useSelector() will allow you to easily segment your data into slices without impacting performance of your application.

Upvotes: 1

Related Questions