Merge pull request #5603 from marmelab/fix-optimized-datagrid-blocking

Fix optimized Datagrid freezes when using Expand

Author: djhi

examples/simple/src/posts/ResetViewsButton.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import {
     useUpdateMany,
-    useRefresh,
     useNotify,
     useUnselectAll,
     Button,
@@ -13,7 +12,6 @@ import {
 const ResetViewsButton = ({ resource, selectedIds }) => {
     const notify = useNotify();
     const unselectAll = useUnselectAll();
-    const refresh = useRefresh();
     const [updateMany, { loading }] = useUpdateMany(
         resource,
         selectedIds,
@@ -28,7 +26,6 @@ const ResetViewsButton = ({ resource, selectedIds }) => {
                     true
                 );
                 unselectAll(resource);
-                refresh();
             },
             onFailure: error =>
                 notify(

packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx

@@ -3,7 +3,7 @@ import { cloneElement, memo, FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableBodyProps } from '@material-ui/core';
 import classnames from 'classnames';
-import isEqual from 'lodash/isEqual';
+import { shallowEqual } from 'react-redux';
 import { Identifier, Record, RecordMap } from 'ra-core';
 
 import DatagridRow, { PureDatagridRow } from './DatagridRow';
@@ -135,9 +135,19 @@ export interface DatagridBodyProps extends Omit<TableBodyProps, 'classes'> {
 DatagridBody.muiName = 'TableBody';
 
 const areEqual = (prevProps, nextProps) => {
-    const { children: _, ...prevPropsWithoutChildren } = prevProps;
-    const { children: __, ...nextPropsWithoutChildren } = nextProps;
-    return isEqual(prevPropsWithoutChildren, nextPropsWithoutChildren);
+    const {
+        children: _1,
+        expand: _2,
+        row: _3,
+        ...prevPropsWithoutChildren
+    } = prevProps;
+    const {
+        children: _4,
+        expand: _5,
+        row: _6,
+        ...nextPropsWithoutChildren
+    } = nextProps;
+    return shallowEqual(prevPropsWithoutChildren, nextPropsWithoutChildren);
 };
 
 export const PureDatagridBody = memo(DatagridBody, areEqual);

packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx

@@ -25,7 +25,7 @@ import {
     Record,
     useResourceContext,
 } from 'ra-core';
-import isEqual from 'lodash/isEqual';
+import { shallowEqual } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import DatagridCell from './DatagridCell';
@@ -265,9 +265,9 @@ export type RowClickFunction = (
 ) => string;
 
 const areEqual = (prevProps, nextProps) => {
-    const { children: _, ...prevPropsWithoutChildren } = prevProps;
-    const { children: __, ...nextPropsWithoutChildren } = nextProps;
-    return isEqual(prevPropsWithoutChildren, nextPropsWithoutChildren);
+    const { children: _1, expand: _2, ...prevPropsWithoutChildren } = prevProps;
+    const { children: _3, expand: _4, ...nextPropsWithoutChildren } = nextProps;
+    return shallowEqual(prevPropsWithoutChildren, nextPropsWithoutChildren);
 };
 
 export const PureDatagridRow = memo(DatagridRow, areEqual);