Skip to content

[EuiComboBox] Performance issue on rerender #4866

@dej611

Description

@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:

Screenshot 2021-06-07 at 17 03 52

Same chart with the timings popup:

Screenshot 2021-06-07 at 17 04 30

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":
Screenshot 2021-06-07 at 17 55 36

"4x slowdown CPU":
Screenshot 2021-06-07 at 17 52 38

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions