Skip to content

Commit

Permalink
fix(table): prevent comparison of props of type element/node
Browse files Browse the repository at this point in the history
  • Loading branch information
tay1orjones committed Nov 11, 2020
1 parent 35ae31e commit 6dbb37c
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 3 deletions.
35 changes: 33 additions & 2 deletions src/components/Table/StatefulTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const StatefulTable = ({ data: initialData, expandedData, ...other }) => {

const { pagination, toolbar, table, onUserViewModified } = callbackActions;

// Need to initially sort and filter the tables data, but preserve the selectedId
// Need to initially sort and filter the tables data, but preserve the selectedId.
useDeepCompareEffect(() => {
dispatch(
tableRegister({
Expand All @@ -73,7 +73,38 @@ const StatefulTable = ({ data: initialData, expandedData, ...other }) => {
hasUserViewManagement,
})
);
}, [initialData, isLoading, initialState]);
}, [
// Props of type React.Element or React.Node must not be included in
// useDeepCompareEffect dependency arrays, their object signature is
// massive and will throw out of memory errors if compared.
// https://github.com/kentcdodds/use-deep-compare-effect/issues/7
// https://twitter.com/dan_abramov/status/1104415855612432384
initialData,
isLoading,
initialState.pagination,
initialState.filters,
initialState.toolbar.activeBar,
// Remove the icon as it's a React.Element which can not be compared
initialState.toolbar.batchActions.map((action) => {
const { icon, ...nonElements } = action;
return nonElements;
}),
initialState.toolbar.initialDefaultSearch,
initialState.toolbar.search,
initialState.toolbar.isDisabled,
initialState.table.isSelectAllSelected,
initialState.table.isSelectAllIndeterminate,
initialState.table.selectedIds,
initialState.table.sort,
initialState.table.ordering,
// Remove the error as it's a React.Element/Node which can not be compared
initialState.table.rowActions.map((action) => {
const { error, ...nonElements } = action;
return nonElements;
}),
initialState.table.expandedIds,
initialState.table.loadingState,
]);

const columns = hasUserViewManagement ? state.columns : initialColumns;
const initialDefaultSearch = state?.view?.toolbar?.initialDefaultSearch || '';
Expand Down
33 changes: 32 additions & 1 deletion src/components/Table/Table.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,38 @@ const Table = (props) => {
initialRendering.current = false;
}
}
}, [view, columns]);
}, [
// Props of type React.Element or React.Node must not be included in
// useDeepCompareEffect dependency arrays, their object signature is
// massive and will throw out of memory errors if compared.
// https://github.com/kentcdodds/use-deep-compare-effect/issues/7
// https://twitter.com/dan_abramov/status/1104415855612432384
view.pagination,
view.filters,
view.toolbar.activeBar,
// Remove the icon as it's a React.Element which can not be compared
view.toolbar.batchActions.map((action) => {
const { icon, ...nonElements } = action;
return nonElements;
}),
view.toolbar.initialDefaultSearch,
view.toolbar.search,
view.toolbar.isDisabled,
view.table.isSelectAllSelected,
view.table.isSelectAllIndeterminate,
view.table.selectedIds,
view.table.sort,
view.table.ordering,
// Remove the error as it's a React.Element/Node which can not be compared
view.table.rowActions.map((action) => {
const { error, ...nonElements } = action;
return nonElements;
}),
view.table.expandedIds,
view.table.loadingState,
view.table.filteredData,
columns,
]);

const { maxPages, ...paginationProps } = view.pagination;
const langDir = useLangDirection();
Expand Down

0 comments on commit 6dbb37c

Please sign in to comment.