[RFR] Fix Datagrid can't handle dynamic children

docs/List.md

@@ -1026,6 +1026,29 @@ const PostList = ({ classes, ...props }) => (
 export default withStyles(styles)(PostList);
 ```
 
+### Performance
+
+when displaying large pages of data, you might experience some performance issues.
+This is mostly due to the fact that we iterate over the `<Datagrid>` children and clone them.
+
+In such cases, you can opt-in for an optimized version of the `<Datagrid>` by setting its `optimized` prop to `true`. 
+Be aware that you can't have dynamic children, such as those displayed or hidden by checking permissions, when using this mode.
+
+```jsx
+const PostList = props => (
+    <List {...props}>
+        <Datagrid optimized>
+            <TextField source="id" />
+            <TextField source="title" />
+            <TextField source="views" />
+        </Datagrid>
+    </List>
+);
+
+export default withStyles(styles)(PostList);
+```
+
+
 ## The `<SimpleList>` component
 
 For mobile devices, a `<Datagrid>` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `<SimpleList>` component serves that purpose, leveraging [material-ui's `<List>` and `<ListItem>` components](https://material-ui.com/demos/lists/). You can use it as `<List>` or `<ReferenceManyField>` child:

packages/ra-ui-materialui/src/list/Datagrid.js

@@ -15,8 +15,8 @@ import Checkbox from '@material-ui/core/Checkbox';
 import classnames from 'classnames';
 
 import DatagridHeaderCell from './DatagridHeaderCell';
-import DatagridBody from './DatagridBody';
 import DatagridLoading from './DatagridLoading';
+import MemoDatagridBody, { DatagridBody } from './DatagridBody';
 
 const useStyles = makeStyles(theme => ({
     table: {
@@ -103,7 +103,8 @@ function Datagrid({ classes: classesOverride, ...props }) {
     const classes = useStyles({ classes: classesOverride });
     const {
         basePath,
-        body,
+        optimized = false,
+        body = optimized ? <MemoDatagridBody /> : <DatagridBody />,
         children,
         className,
         currentSort,
@@ -289,7 +290,6 @@ Datagrid.defaultProps = {
     hasBulkActions: false,
     ids: [],
     selectedIds: [],
-    body: <DatagridBody />,
 };
 
 export default Datagrid;

packages/ra-ui-materialui/src/list/DatagridBody.js

@@ -1,11 +1,11 @@
-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';
 
-import DatagridRow from './DatagridRow';
+import PureDatagridRow, { DatagridRow } from './DatagridRow';
 
-const DatagridBody = ({
+export const DatagridBody = ({
     basePath,
     children,
     classes,
@@ -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,11 @@ 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';
+MemoDatagridBody.muiName = 'TableBody';
+MemoDatagridBody.defaultProps = {
+    row: <PureDatagridRow />,
+};
 
-export default DatagridBody;
+export default MemoDatagridBody;

packages/ra-ui-materialui/src/list/DatagridRow.js

@@ -8,13 +8,13 @@ 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';
 import { push } from 'connected-react-router';
 import { TableCell, TableRow, Checkbox } from '@material-ui/core';
 import { linkToRecord } from 'ra-core';
+import isEqual from 'lodash/isEqual';
 
 import DatagridCell from './DatagridCell';
 import ExpandRowButton from './ExpandRowButton';
@@ -28,7 +28,7 @@ const computeNbColumns = (expand, children, hasBulkActions) =>
 
 const defaultClasses = {};
 
-const DatagridRow = ({
+export const DatagridRow = ({
     basePath,
     children,
     classes = defaultClasses,