Skip to content

Commit 89589b6

Browse files
author
Alex Zherdev
committed
Improve DataTable rerendering performance
1 parent 97c2209 commit 89589b6

11 files changed

+5375
-1345
lines changed

‎.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
'json',
1919
'prefer-object-spread',
2020
'@salesforce/slds-react',
21+
'react-hooks',
2122
],
2223
env: {
2324
browser: true,
@@ -195,6 +196,9 @@ module.exports = {
195196
// 'fp/no-unused-expression': 'error',
196197
'fp/no-valueof-field': 'error',
197198

199+
'react-hooks/rules-of-hooks': 'error',
200+
'react-hooks/exhaustive-deps': 'error',
201+
198202
//
199203
// THE FOLLOWING RULES NEED REVIEW IN THE FUTURE (and possibly removed)
200204
//

‎components/button/__tests__/button.browser-test.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ describe('SLDSButton: ', () => {
4646
style: { background: 'rgb(18, 49, 35)' },
4747
});
4848
[btn] = cmp.getElementsByClassName('slds-button');
49-
console.log('!!!!!', cmp, btn);
5049
});
5150

5251
it('renders correct label', () => {

‎components/data-table/cell.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import classNames from 'classnames';
1010

1111
import CellContext from './private/cell-context';
1212
import TableContext from './private/table-context';
13-
import contextHelper from './private/context-helper';
13+
import useContextHelper from './private/context-helper';
1414

1515
// ## Constants
1616
import { DATA_TABLE_CELL } from '../../utilities/constants';
@@ -21,7 +21,7 @@ import { DATA_TABLE_CELL } from '../../utilities/constants';
2121
const DataTableCell = (props) => {
2222
const tableContext = useContext(TableContext);
2323
const cellContext = useContext(CellContext);
24-
const { tabIndex, hasFocus, handleFocus, handleKeyDown } = contextHelper(
24+
const { tabIndex, hasFocus, handleFocus, handleKeyDown } = useContextHelper(
2525
tableContext,
2626
cellContext,
2727
props.fixedLayout

‎components/data-table/index.jsx

+130-85
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ import shortid from 'shortid';
1616

1717
import classNames from 'classnames';
1818
import assign from 'lodash.assign';
19+
import isEqual from 'lodash.isequal';
20+
import memoize from 'memoize-one';
1921
import reject from 'lodash.reject';
20-
2122
// This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
2223
import ColumnResizer from 'column-resizer';
2324
import checkProps from './check-props';
@@ -74,6 +75,90 @@ const defaultProps = {
7475
},
7576
};
7677

78+
const getAssistiveText = memoize(
79+
(
80+
assistiveText,
81+
actionsHeaderText,
82+
columnSortText,
83+
columnSortedAscendingText,
84+
columnSortedDescendingText,
85+
selectAllRowsText,
86+
selectRowText
87+
) => {
88+
const result = {
89+
...defaultProps.assistiveText,
90+
...assistiveText,
91+
};
92+
if (actionsHeaderText) {
93+
result.actionsHeader = actionsHeaderText;
94+
}
95+
if (selectAllRowsText) {
96+
result.selectAllRows = selectAllRowsText;
97+
}
98+
if (columnSortedAscendingText) {
99+
result.columnSortedAscending = columnSortedAscendingText;
100+
}
101+
if (columnSortedDescendingText) {
102+
result.columnSortedDescending = columnSortedDescendingText;
103+
}
104+
if (columnSortText) {
105+
result.columnSort = columnSortText;
106+
}
107+
if (selectRowText) {
108+
result.selectRow = selectRowText;
109+
}
110+
return result;
111+
},
112+
isEqual
113+
);
114+
115+
const getColumnsAndRowActions = memoize(
116+
(children, id, fixedHeader, fixedLayout, search) => {
117+
const columns = [];
118+
let RowActions = null;
119+
120+
React.Children.forEach(children, (child) => {
121+
if (child && child.type.displayName === DataTableColumn.displayName) {
122+
const { children: columnChildren, ...columnProps } = child.props;
123+
const props = { fixedLayout, search, id, ...columnProps };
124+
125+
let Cell;
126+
if (
127+
columnChildren &&
128+
columnChildren.type.displayName === DATA_TABLE_CELL
129+
) {
130+
Cell = columnChildren.type;
131+
assign(props, columnChildren.props);
132+
} else {
133+
Cell = DataTableCell;
134+
}
135+
136+
// eslint-disable-next-line fp/no-mutating-methods
137+
columns.push({
138+
Cell,
139+
props,
140+
});
141+
} else if (
142+
child &&
143+
child.type.displayName === DataTableRowActions.displayName
144+
) {
145+
const { dropdown } = child.props;
146+
const dropdownPropOverrides = {};
147+
if (fixedHeader) {
148+
dropdownPropOverrides.menuPosition = 'overflowBoundaryElement';
149+
}
150+
RowActions = React.cloneElement(child, {
151+
dropdown: dropdown
152+
? React.cloneElement(dropdown, dropdownPropOverrides)
153+
: null,
154+
});
155+
}
156+
});
157+
return { columns, RowActions };
158+
},
159+
isEqual
160+
);
161+
77162
/**
78163
* DataTables support the display of structured data in rows and columns with an HTML table. To sort, filter or paginate the table, simply update the data passed in the items to the table and it will re-render itself appropriately. The table will throw a sort event as needed, and helper components for paging and filtering are coming soon.
79164
*
@@ -366,9 +451,7 @@ class DataTable extends React.Component {
366451
// Simulating a scroll here will ensure that enough rows are loaded to enable scrolling
367452
this.loadMoreIfNeeded();
368453
}
369-
if (this.props.items !== prevProps.items) {
370-
this.interactiveElements = {};
371-
}
454+
372455
if (
373456
this.state.allowKeyboardNavigation &&
374457
!prevState.allowKeyboardNavigation
@@ -440,6 +523,23 @@ class DataTable extends React.Component {
440523
return null;
441524
}
442525

526+
getTableContext = memoize((state, isKeyboardNavigation) => ({
527+
activeCell: state.activeCell,
528+
activeElement: state.activeElement,
529+
mode: state.mode,
530+
tableHasFocus: state.tableHasFocus,
531+
changeActiveCell: this.changeActiveCell,
532+
changeActiveElement: this.changeActiveElement,
533+
handleKeyDown: this.handleKeyDown,
534+
registerInteractiveElement: this.registerInteractiveElement,
535+
allowKeyboardNavigation: state.allowKeyboardNavigation,
536+
setAllowKeyboardNavigation: (allowKeyboardNavigation) => {
537+
if (isKeyboardNavigation) {
538+
this.setState({ allowKeyboardNavigation });
539+
}
540+
},
541+
}));
542+
443543
handleToggleAll = (e, { checked }) => {
444544
// REMOVE AT NEXT BREAKING CHANGE
445545
// `onChange` is deprecated and replaced with `onRowChange`
@@ -587,6 +687,13 @@ class DataTable extends React.Component {
587687
}
588688
};
589689

690+
// eslint-disable-next-line camelcase
691+
UNSAFE_componentWillUpdate(nextProps) {
692+
if (this.props.items !== nextProps.items) {
693+
this.interactiveElements = {};
694+
}
695+
}
696+
590697
isResizable() {
591698
return this.props.fixedLayout && this.props.resizable;
592699
}
@@ -989,71 +1096,24 @@ class DataTable extends React.Component {
9891096
const allSelected = canSelectRows && numNonHeaderRows === numSelected;
9901097
const indeterminateSelected =
9911098
canSelectRows && numNonHeaderRows !== numSelected && numSelected !== 0;
992-
const columns = [];
993-
let RowActions = null;
9941099

995-
React.Children.forEach(this.props.children, (child) => {
996-
if (child && child.type.displayName === DataTableColumn.displayName) {
997-
const { children, ...columnProps } = child.props;
998-
999-
const props = assign({}, this.props);
1000-
// eslint-disable-next-line fp/no-delete
1001-
delete props.children;
1002-
assign(props, columnProps);
1003-
1004-
let Cell;
1005-
if (children && children.type.displayName === DATA_TABLE_CELL) {
1006-
Cell = children.type;
1007-
assign(props, children.props);
1008-
} else {
1009-
Cell = DataTableCell;
1010-
}
1011-
1012-
// eslint-disable-next-line fp/no-mutating-methods
1013-
columns.push({
1014-
Cell,
1015-
props,
1016-
dataTableProps: this.props,
1017-
});
1018-
} else if (
1019-
child &&
1020-
child.type.displayName === DataTableRowActions.displayName
1021-
) {
1022-
const { dropdown } = child.props;
1023-
const dropdownPropOverrides = {};
1024-
if (this.getFixedHeader()) {
1025-
dropdownPropOverrides.menuPosition = 'overflowBoundaryElement';
1026-
}
1027-
RowActions = React.cloneElement(child, {
1028-
dropdown: dropdown
1029-
? React.cloneElement(dropdown, dropdownPropOverrides)
1030-
: null,
1031-
});
1032-
}
1033-
});
1100+
const { columns, RowActions } = getColumnsAndRowActions(
1101+
this.props.children,
1102+
this.props.id,
1103+
this.getFixedHeader(),
1104+
this.props.fixedLayout,
1105+
this.props.search
1106+
);
10341107

1035-
const assistiveText = {
1036-
...defaultProps.assistiveText,
1037-
...this.props.assistiveText,
1038-
};
1039-
if (this.props.assistiveTextForActionsHeader) {
1040-
assistiveText.actionsHeader = this.props.assistiveTextForActionsHeader;
1041-
}
1042-
if (this.props.assistiveTextForSelectAllRows) {
1043-
assistiveText.selectAllRows = this.props.assistiveTextForSelectAllRows;
1044-
}
1045-
if (this.props.assistiveTextForColumnSortedAscending) {
1046-
assistiveText.columnSortedAscending = this.props.assistiveTextForColumnSortedAscending;
1047-
}
1048-
if (this.props.assistiveTextForColumnSortedDescending) {
1049-
assistiveText.columnSortedDescending = this.props.assistiveTextForColumnSortedDescending;
1050-
}
1051-
if (this.props.assistiveTextForColumnSort) {
1052-
assistiveText.columnSort = this.props.assistiveTextForColumnSort;
1053-
}
1054-
if (this.props.assistiveTextForSelectRow) {
1055-
assistiveText.selectRow = this.props.assistiveTextForSelectRow;
1056-
}
1108+
const assistiveText = getAssistiveText(
1109+
this.props.assistiveText,
1110+
this.props.assistiveTextForActionsHeader,
1111+
this.props.assistiveTextForSelectAllRows,
1112+
this.props.assistiveTextForColumnSortedAscending,
1113+
this.props.assistiveTextForColumnSortedDescending,
1114+
this.props.assistiveTextForColumnSort,
1115+
this.props.assistiveTextForSelectRow
1116+
);
10571117

10581118
if (this.props.selectRows && this.props.selectRows !== 'radio') {
10591119
ariaProps['aria-multiselectable'] = 'true';
@@ -1066,26 +1126,11 @@ class DataTable extends React.Component {
10661126
select: canSelectRows ? this.headerRefs.select : [],
10671127
};
10681128

1069-
const tableContext = {
1070-
activeCell: this.state.activeCell,
1071-
activeElement: this.state.activeElement,
1072-
mode: this.state.mode,
1073-
tableHasFocus: this.state.tableHasFocus,
1074-
changeActiveCell: this.changeActiveCell,
1075-
changeActiveElement: this.changeActiveElement,
1076-
handleKeyDown: this.handleKeyDown,
1077-
registerInteractiveElement: this.registerInteractiveElement,
1078-
allowKeyboardNavigation: this.state.allowKeyboardNavigation,
1079-
setAllowKeyboardNavigation: (allowKeyboardNavigation) => {
1080-
if (this.getKeyboardNavigation()) {
1081-
this.setState({ allowKeyboardNavigation });
1082-
}
1083-
},
1084-
};
1085-
10861129
let component = (
10871130
<React.Fragment>
1088-
<TableContext.Provider value={tableContext}>
1131+
<TableContext.Provider
1132+
value={this.getTableContext(this.state, this.getKeyboardNavigation())}
1133+
>
10891134
<table
10901135
{...ariaProps}
10911136
className={classNames(

‎components/data-table/private/context-helper.js

+26-14
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,42 @@
11
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
22
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
33

4+
import { useCallback } from 'react';
5+
46
/**
57
* Calculates data table keyboard navigation state based on currently selected cell
68
*/
7-
export default (tableContext, cellContext, fixedLayout) => {
9+
export default function useTableContextHelper(
10+
tableContext,
11+
cellContext,
12+
fixedLayout
13+
) {
814
const isActive =
915
tableContext.activeCell.rowIndex === cellContext.rowIndex &&
1016
tableContext.activeCell.columnIndex === cellContext.columnIndex;
1117

1218
const hasFocus = fixedLayout && tableContext.tableHasFocus && isActive;
13-
14-
const handleFocus = () => {
19+
const { changeActiveCell, handleKeyDown: handleTableKeyDown } = tableContext;
20+
const handleFocus = useCallback(() => {
1521
if (fixedLayout && tableContext.allowKeyboardNavigation) {
16-
tableContext.changeActiveCell(
17-
cellContext.rowIndex,
18-
cellContext.columnIndex
19-
);
22+
changeActiveCell(cellContext.rowIndex, cellContext.columnIndex);
2023
}
21-
};
24+
}, [
25+
fixedLayout,
26+
tableContext.allowKeyboardNavigation,
27+
changeActiveCell,
28+
cellContext.rowIndex,
29+
cellContext.columnIndex,
30+
]);
2231

23-
const handleKeyDown = (event) => {
24-
if (fixedLayout && tableContext.allowKeyboardNavigation) {
25-
tableContext.handleKeyDown(event);
26-
}
27-
};
32+
const handleKeyDown = useCallback(
33+
(event) => {
34+
if (fixedLayout && tableContext.allowKeyboardNavigation) {
35+
handleTableKeyDown(event);
36+
}
37+
},
38+
[fixedLayout, tableContext.allowKeyboardNavigation, handleTableKeyDown]
39+
);
2840

2941
const tabIndex =
3042
fixedLayout &&
@@ -35,4 +47,4 @@ export default (tableContext, cellContext, fixedLayout) => {
3547
: undefined;
3648

3749
return { tabIndex, hasFocus, handleFocus, handleKeyDown };
38-
};
50+
}

0 commit comments

Comments
 (0)