Performance tweaking for DataGrid

[mbondyra]

Summary

I played a bit with the performance on EuiDataGrid component and I noticed that there's a visual lag for bigger datasets(around 100 rows and more). At the moment even the smallest change like selecting a different cell unnecessarily rerenders the whole table. Here's the gif with the updates highlighted and a React profiler view:

The good news is there are a couple of easy gains to make it significantly faster (from 200ms to 10ms in dev environment for table of 100rows). The changes include:

• memoizing the context for the DataGrid - before, along with any changes on the EuiDataGrid, context was being recreated and all the cells (as they are accessing context) rerendered.
• memoizing the row component with React.memo
• before the prop focusedCell was passed to every Row component. But if we change the cell from [0,0] to [1,1], the row 3 doesn't have to know about the change because for it nothing changes (the cells inside the row 3 don't have to know it either). So instead of passing the [x,y] position of focusedCell I propose to pass focusedCellPositionInTheRow which is only the x value of focused position.

Example:
Let's say the cell [3,1] is focused.
The row 0 will get focusedCellPositionInTheRow=null
row 1: focusedCellPositionInTheRow=3
row 2: focusedCellPositionInTheRow=null
row 3: focusedCellPositionInTheRow=null

This way only the involved rows will be rerendered. I know we pay the cost of lower readability but... well... that's performance problems in its core, readability vs performance 😅

Here's the stats after the changes:

Checklist

• [ ] Checked in dark mode
• [ ] Checked in mobile
• [ ] Checked in IE11 and Firefox
• [ ] Props have proper autodocs
• [ ] Added documentation examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[myasonik]

This is a great improvement and should certainly help make Discover feel a little snappier!

🎉

[chandlerprall]

Changes LGreatTM, pulled & tested locally. Love it, and thank you @mbondyra !

[chandlerprall]

Missing a CHANGELOG.md entry - should get a quick note on the performance improvement in the top Bug Fixes section https://github.com/elastic/eui/blob/master/CHANGELOG.md