Is there anything better than refs for re-renderering one of multiple components?

Question

In my ReactJS app, I need to display a list of devices that is fetched from the remote server. It looks something like this:

<App>
  {this.state.devices}
</App>

After the data is fetched, the devices state will be updated (to an array of elements) so the App will look like this:

<App>
  <Device name="LH2" status="..."/>
  <Device name="LH3" status="..."/>
</App>

After all the device components are rendered, I want my app to check for any changes in the status of any device (by using WebSocket or continuously fetching the server) and re-render it. I did think of modifying the state devices but if I understand this correctly, all of the <Device /> elements will be re-render while one or a few of them actually change. Using refs is the best way I could think of in this case:

<App>
  <Device ref={refs[0]} name="LH2" status="..."/>
  <Device ref={refs[1]} name="LH3" status="..."/>
  ...
</App>

With refs, I don't need to update the state of devices which can possibly trigger a full re-render. And I can modify directly any <Device /> element when needed.

But I wonder if there is any better way to do this? Or do I even need to use state.devices in the first place?