refactor data-grid into seprate component to memoize

src/components/Fields/Color.tsx

@@ -74,7 +74,6 @@ const Color = (props: Props) => {
             setHex(props.hex);
           }}
           onChangeComplete={props => {
-            console.log(props);
             onSubmit({ hex: props.hex, hsl: props.hsl, rgb: props.rgb });
             setAnchorEl(null);
           }}

src/components/Table/EmptyTable.tsx

@@ -3,7 +3,7 @@ import Button from "@material-ui/core/Button";
 
 const EmptyTable = (props: any) => {
   const { isLoading, tableHeight, addRow } = props;
-  if (isLoading) return <h3>loading row</h3>;
+  if (isLoading) return <h3>Fetching rows</h3>;
   else
     return (
       <div

src/components/Table/Grid.tsx

@@ -0,0 +1,69 @@
+import React, { lazy, Suspense } from "react";
+import EmptyTable from "./EmptyTable";
+import { editable } from "./grid-fns";
+import { DraggableHeader } from "react-data-grid-addons";
+import isEqual from "lodash/isEqual";
+const ReactDataGrid = lazy(() => import("react-data-grid"));
+const { DraggableContainer } = DraggableHeader;
+const Grid = (props: any) => {
+  const {
+    onHeaderDrop,
+    rowHeight,
+    columns,
+    RowRenderer,
+    handleRowGetter,
+
+    tableHeight,
+    onGridRowsUpdated,
+    rows,
+    resizeColumn,
+    loadingRows,
+    addRow,
+    setSelectedCell,
+  } = props;
+  return (
+    <Suspense fallback={<div>Loading table...</div>}>
+      <DraggableContainer onHeaderDrop={onHeaderDrop}>
+        <ReactDataGrid
+          headerRowHeight={45}
+          rowRenderer={RowRenderer}
+          rowHeight={rowHeight}
+          columns={columns}
+          rowGetter={handleRowGetter}
+          rowsCount={rows.length}
+          onGridRowsUpdated={onGridRowsUpdated}
+          minHeight={tableHeight}
+          onCellSelected={(coordinates: { rowIdx: number; idx: number }) => {
+            const row = rows[coordinates.rowIdx];
+            const column = columns[coordinates.idx];
+            // if (editable(column.type)) {
+            // only editable fields are stored selectedCell, temporary fix for custom fields
+            setSelectedCell({ row, column });
+            //}
+          }}
+          onColumnResize={(idx: number, width: number) =>
+            //tableActions.column.resize(idx, width)
+            resizeColumn(idx, width)
+          }
+          emptyRowsView={() => (
+            <EmptyTable
+              //isLoading={tableState.loadingRows}
+              isLoading={loadingRows}
+              tableHeight={tableHeight}
+              addRow={addRow}
+            />
+          )}
+        />
+      </DraggableContainer>
+    </Suspense>
+  );
+};
+
+export default React.memo(Grid, (prevProps, nextProps) => {
+  return (
+    isEqual(prevProps.columns, nextProps.columns) ||
+    isEqual(prevProps.rows, nextProps.rows)
+    // || prevProps.rowHeight === nextProps.rowHeight ||
+    // prevProps.tableHeight === nextProps.tableHeight
+  );
+});

src/components/Table/index.tsx

@@ -19,20 +19,16 @@ import Typography from "@material-ui/core/Typography";
 import AddIcon from "@material-ui/icons/AddCircle";
 import SettingsIcon from "@material-ui/icons/Settings";
 import useWindowSize from "../../hooks/useWindowSize";
-import { DraggableHeader } from "react-data-grid-addons";
 import Confirmation from "components/Confirmation";
 import DeleteIcon from "@material-ui/icons/Delete";
 import DuplicateIcon from "@material-ui/icons/FileCopy";
 import useStyles from "./useStyle";
-import EmptyTable from "./EmptyTable";
+import Grid from "./Grid";
 const Hotkeys = lazy(() => import("./HotKeys"));
-const ReactDataGrid = lazy(() => import("react-data-grid"));
 const TableHeader = lazy(() => import("./TableHeader"));
 const SearchBox = lazy(() => import("../SearchBox"));
 const DocSelect = lazy(() => import("../Fields/DocSelect"));
 const ColumnEditor = lazy(() => import("./ColumnEditor/index"));
-
-const { DraggableContainer } = DraggableHeader;
 const deleteAlgoliaRecord = functions.httpsCallable(
   CLOUD_FUNCTIONS.deleteAlgoliaRecord
 );
@@ -243,47 +239,27 @@ function Table(props: Props) {
           columns={columns}
           addRow={tableActions.row.add}
         />
-      </Suspense>
-      <Suspense fallback={<div>Loading table...</div>}>
-        {!tableState.loadingColumns ? (
-          <DraggableContainer onHeaderDrop={onHeaderDrop}>
-            <ReactDataGrid
-              headerRowHeight={45}
-              rowRenderer={RowRenderer}
-              rowHeight={rowHeight}
-              columns={columns}
-              enableCellSelect={true}
-              rowGetter={handleRowGetter}
-              rowsCount={rows.length}
-              onGridRowsUpdated={onGridRowsUpdated}
-              minHeight={tableHeight}
-              onCellSelected={(coordinates: {
-                rowIdx: number;
-                idx: number;
-              }) => {
-                const row = rows[coordinates.rowIdx];
-                const column = columns[coordinates.idx];
-                if (editable(column.type)) {
-                  // only editable fields are stored selectedCell, temporary fix for custom fields
-                  setSelectedCell({ row, column });
-                }
-              }}
-              onColumnResize={(idx, width) =>
-                tableActions.column.resize(idx, width)
-              }
-              emptyRowsView={() => (
-                <EmptyTable
-                  isLoading={tableState.loadingRows}
-                  tableHeight={tableHeight}
-                  addRow={tableActions.row.add}
-                />
-              )}
-            />
-          </DraggableContainer>
-        ) : (
-          <p>fetching columns</p>
-        )}
-
+      </Suspense>{" "}
+      {!tableState.loadingColumns ? (
+        <Grid
+          key={`${collection}-grid`}
+          onHeaderDrop={onHeaderDrop}
+          rowHeight={rowHeight}
+          columns={columns}
+          RowRenderer={RowRenderer}
+          handleRowGetter={handleRowGetter}
+          tableHeight={tableHeight}
+          onGridRowsUpdated={onGridRowsUpdated}
+          rows={rows}
+          resizeColumn={tableActions.column.resize}
+          loadingRows={tableState.loadingRows}
+          addRow={tableActions.row.add}
+          setSelectedCell={setSelectedCell}
+        />
+      ) : (
+        <p>fetching columns</p>
+      )}
+      <Suspense fallback={<div>Loading helpers...</div>}>
         <ColumnEditor
           handleClose={handleCloseHeader}
           anchorEl={anchorEl}