[EuiDataGridCell] Migrate from class to function component
- 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
Assessment
This issue has not been assessed yet.