React performance in mobile browser

Question

I have a component (table) that contains many lines with data editing in them, with masks in the form of contenteditable, it is possible to select all fields and change all the lines at the same time.

On desktop it works pretty fast, but on iPhone 6 I have unreal lagging, with Safari hanging for 20 seconds for each action.

I completed the recommendations to improve performance from React: prevent reconciliation, pure components, etc ...

Are there ways to improve performance? Is it necessary for me to ponder a functionality change on a mobile device, in favor of performance?

Answer 1

You should override shouldComponentUpdate component life cycle method for every row of the table. Ideally for every cell in every row.

If you have a table and it gets a different props. What happens is that every nested component gets re-rendered. PureComponents might help but writing shouldComponentUpdate is the only way to really control when something gets re-rendered.

Also for really large data list there is a react-virtualized. Check it out. Its pretty cool.

It would be nice if you could post source code though.