Fix Datagrid can't handle dynamic children

Fixes #3631 and #3629
marmelab · Sep 2, 2019 · 146dd75 · 146dd75
1 parent 8b44287
commit 146dd75
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 51 deletions.
diff --git a/packages/ra-ui-materialui/src/list/DatagridBody.js b/packages/ra-ui-materialui/src/list/DatagridBody.js
@@ -1,4 +1,4 @@
-import React, { cloneElement, useMemo } from 'react';
+import React, { cloneElement, memo } from 'react';
 import PropTypes from 'prop-types';
 import TableBody from '@material-ui/core/TableBody';
 import classnames from 'classnames';
@@ -24,45 +24,36 @@ const DatagridBody = ({
     styles,
     version,
     ...rest
-}) =>
-    useMemo(
-        () => (
-            <TableBody
-                className={classnames('datagrid-body', className)}
-                {...rest}
-            >
-                {ids.map((id, rowIndex) =>
-                    cloneElement(
-                        row,
-                        {
-                            basePath,
-                            classes,
-                            className: classnames(classes.row, {
-                                [classes.rowEven]: rowIndex % 2 === 0,
-                                [classes.rowOdd]: rowIndex % 2 !== 0,
-                                [classes.clickableRow]: rowClick,
-                            }),
-                            expand,
-                            hasBulkActions,
-                            hover,
-                            id,
-                            key: id,
-                            onToggleItem,
-                            record: data[id],
-                            resource,
-                            rowClick,
-                            selected: selectedIds.includes(id),
-                            style: rowStyle
-                                ? rowStyle(data[id], rowIndex)
-                                : null,
-                        },
-                        children
-                    )
-                )}
-            </TableBody>
-        ),
-        [version, data, selectedIds, JSON.stringify(ids), hasBulkActions] // eslint-disable-line
-    );
+}) => (
+    <TableBody className={classnames('datagrid-body', className)} {...rest}>
+        {ids.map((id, rowIndex) =>
+            cloneElement(
+                row,
+                {
+                    basePath,
+                    classes,
+                    className: classnames(classes.row, {
+                        [classes.rowEven]: rowIndex % 2 === 0,
+                        [classes.rowOdd]: rowIndex % 2 !== 0,
+                        [classes.clickableRow]: rowClick,
+                    }),
+                    expand,
+                    hasBulkActions,
+                    hover,
+                    id,
+                    key: id,
+                    onToggleItem,
+                    record: data[id],
+                    resource,
+                    rowClick,
+                    selected: selectedIds.includes(id),
+                    style: rowStyle ? rowStyle(data[id], rowIndex) : null,
+                },
+                children
+            )
+        )}
+    </TableBody>
+);
 
 DatagridBody.propTypes = {
     basePath: PropTypes.string,
@@ -91,7 +82,7 @@ DatagridBody.defaultProps = {
     row: <DatagridRow />,
 };
 
+const MemoDatagridBody = memo(DatagridBody);
 // trick material-ui Table into thinking this is one of the child type it supports
-DatagridBody.muiName = 'TableBody';
-
-export default DatagridBody;
+MemoDatagridBody.muiName = 'TableBody';
+export default MemoDatagridBody;
diff --git a/packages/ra-ui-materialui/src/list/DatagridRow.js b/packages/ra-ui-materialui/src/list/DatagridRow.js
@@ -8,7 +8,6 @@ import React, {
     useCallback,
     memo,
 } from 'react';
-import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDispatch } from 'react-redux';
@@ -207,13 +206,7 @@ DatagridRow.defaultProps = {
     selected: false,
 };
 
-const areEqual = (prevProps, nextProps) => {
-    const { children: _, ...prevPropsWithoutChildren } = prevProps;
-    const { children: __, ...nextPropsWithoutChildren } = nextProps;
-    return isEqual(prevPropsWithoutChildren, nextPropsWithoutChildren);
-};
-
-const PureDatagridRow = memo(DatagridRow, areEqual);
+const PureDatagridRow = memo(DatagridRow);
 
 PureDatagridRow.displayName = 'PureDatagridRow';