[EuiComboBox] Performance issue on rerender

[dej611]

The AutosizeInput internal component within the EuiComboBox is causing noticeable performance issue in a UI on component rerender.

The code around the EuiComboBox had to be optimized to strongly minimize rerenders of the component due to an internal UI reflow triggered by the internal AutosizeInput component.

To give an idea of the performance impact, this is a profile read of a single state update operation in Lens:

Same chart with the timings popup:

This is the line that triggers the performance issue: https://github.com/JedWatson/react-input-autosize/blob/8a68b453ca1dec723e255c40eab7f2928228fe22/src/AutosizeInput.js#L103
That single read operation of the scrollWidth property triggers a full reflow which takes more than 100ms in our case.
The situation is even worse with slower CPUs that seems to be hit even worse by this specific problem, here's a profile recording with regular CPU and "slower CPU" (simulated 4x slowdown CPU):

"Fast CPU":

"4x slowdown CPU":

Some ideas

Not sure there's a specific solution for this problem, but it may help to add some documentation on the EuiComboBox page in a way to make the user aware of the problem - suggesting how to minimize re-renders.

[cee-chen]

It's possible that this may be fixed when we refactor EuiComboBox to use EuiSelectable under the hood (which we'll be doing not just for perf reasons but also accessibility consistency): #2841

We should certainly look into that refactor sometime soon as a result.