elastic / elastic/eui

[EuiSelectableList] Migrate from class to function component

Open
#9,481 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

`EuiSelectableList` renders the virtualized, accessible options list within `EuiSelectable`. Performance-sensitive due to potentially large option sets.

- **File:** `components/selectable/selectable_list/selectable_list.tsx`
- **Class size:** 443 lines
- **State:** `defaultOptionWidth`, `optionArray`, `itemData`, `ariaPosInSetMap`, `ariaSetSize`
- **Lifecycle:** `shouldComponentUpdate`, `componentDidUpdate`, `componentWillUnmount`

**Migration notes:**

Uses `shouldComponentUpdate` for performance optimization — must be replaced with `React.memo` and careful memoization. Complex ARIA attribute computation. Should be migrated with `EuiSelectable`.

**Acceptance criteria:**

- [ ] Convert to function component wrapped in `React.memo`
- [ ] Replace `shouldComponentUpdate` with `React.memo` comparison
- [ ] Maintain virtualization and ARIA attributes
- [ ] Performance benchmark before/after migration
- [ ] All existing tests pass

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.