Reactjs: update specific row

user_9003250 0
Viewed 1378

I would like suggestions on the most efficient way to implement a price / depth ladder GUI in Reactjs.

Each ladder represents a single stock and each row represents the available sizes and traded amounts for each price:

price ladders

The solution I have currently uses a list (stored in class.state) to render the rows of the stock table. Each item in this list represents a row in the stock table. Each render iterates over this list to output the tables show in the picture.

    var items = [];
    for (const sid in this.state.stocks) {
        const rows = this.state.stocks[sid];
        items.push(
            <div key={sid} style={{float: 'left'}}>
                <Ladder
                    rows={rows}
                />
            </div>
        );
    }
    // doRender
    return (
        < div id={'container'}>
            {items}
        </div>
    );
`

The prices are updating frequently and the gui is struggling to keep up. I believe this is because each update redraws all table rows. Either way, my solution is not performing well under load.

I want to optimise updates and ensure only the affected rows are rendered / processed.

reactjs javascript performance
1 Answers

To increase the performance of the UI, I would suggest following things:

  1. Ladder needs to not re-render when there is no changes in rows. You can make it as a component with shouldComponentUpdate to comparing rows or pure component and use recompose utils to do so.
  2. If you gonna have many rows for each Ladder, then should not do the deep comparisons (which consumes resource), but just comparing the instance itself, like:
shouldComponentUpdate(nextProps) {
   return this.props.rows !== nextProps.rows;
}

to do that, you'll need to update the rows correctly. If there is any row changed, then the ladder's rows need to be a new array, otherwise, keep the same array object.

  1. The row also needs to be a component with shouldComponentUpdate to make sure, there is no re-render happens if no need.
  2. It looks like that your data structure is quite complicated, so try to use redux and you'll be better at testing it.
user_79312500
Related