angular
bug(material-experimental/mdc-chips): Poor performance when using multiple `<mat-chip-grid>` components
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
There's a performance issue in material-experimental's <mat-chip-grid>.
We have 69 instances of <mat-chip-grid> on one of our pages, and setDescribedByIds() seems to be getting called 4 times per instance. Since each one results in a setTimeout() call, this is 276 extra change detections, and if your page's change detection is even a tiny bit slow, this introduces a significant performance issue.
https://github.com/angular/components/blob/f384c24b943d7eb36fc73cfe81abb8b08a90e1b7/src/material-experimental/mdc-chips/chip-grid.ts#L366-L379
All of these contribute over 70% of the total time, and this is on a page with no change detection issues:
Reproduction
Expected Behavior
It should result in at most one extra change detection cycle.
Actual Behavior
We get 4 extra change detection cycles per component instance.
Environment
- Angular: v14
- CDK/Material: MDC (material-experimental)
- Browser(s): Chrome 103
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS
