elastic / elastic/eui

[EuiDataGridCell] Migrate from class to function component

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

Description

`EuiDataGridCell` renders individual cells within `EuiDataGrid`. Performance-critical as a data grid can render hundreds of cells simultaneously.

- **File:** `components/datagrid/body/cell/data_grid_cell.tsx`
- **Class size:** 317 lines
- **State:** `cellProps`, `isFocused`, `isHovered`
- **Lifecycle:** `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`, `shouldComponentUpdate`

**Migration notes:**

**Performance-critical.** Uses `shouldComponentUpdate` to prevent unnecessary re-renders in large grids. Must be wrapped in `React.memo` with a custom comparison function. Focus management and cell interaction handling are complex. Benchmark before and after.

**Acceptance criteria:**

- [ ] Convert to function component wrapped in `React.memo`
- [ ] Replace `shouldComponentUpdate` with equivalent memo comparison
- [ ] Performance benchmark: render time with 1000+ cells must not regress
- [ ] Maintain focus management and keyboard navigation
- [ ] All existing tests pass
- [ ] Carefully smoke-tested in Kibana

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.