I'm building a dashboard within my Next.JS application. I expect to be 'use client' for this particular page, with API calls (fetch or SWR) to refresh data.

The dashboard will display rows of information about particular stocks.

In it's simple form you might expect something like:

Stock 1 | current buy price | target buy price | current sell price | target sell price
Stock 2 | ......

for arguments sake consider the following API calls - please don't judge me on what I'm grabbing, this example is a representation of the problem, so recommendations such as combine the API call to get current and target prices won't help, in reality they will be as different as apples and oranges.

refreshStocks - server call to fetch an array of stocks
refreshCurrentPrices - server call to fetch an array of current prices, keyed by stockId
refreshTargetPrices - same as above, also keyed by stockId

one way I could do this would be:

const [stocks, setStocks] = useState([])

// fetch stocks on page launch
function fetchStocks() {
var newStocks = callAPI()
setStocks([...newStocks])
}
// refresh current prices every 10 seconds
function fetchCurrentPrices() {
var newPrices = callAPI()
newPrices.forEach(price => {
var stockToUpdate = stocks.find(s => stock.id === price.stockId);
if (stockToUpdate) stockToUpdate.currentPrices = price;
})

setStocks([...newStocks])
}
// refresh target prices every 10 seconds
.. similar to above



<div>
{stocks.map....
<DisplayStock>
</div>

note all of the above is hand-typed off the top of my head, so there are almost certainly errors, but hopefully it demonstrates the problem (or question being asked).

What I don't like about this is it feels quite heavy, to handle the price updates, we're setting the stocks to a copy of stocks to force the display to update. Is this "fine"/expected, or is there a better way to manage updates to data associated with the stock?