From e15227170af122989679187fdbb49a63ec42a0a6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 23 Mar 2019 11:59:51 +0100
Subject: [PATCH] [Table] Use makeStyles over withStyles

---
 packages/material-ui-benchmark/src/core.js    | 80 ++++++++++++++++++-
 .../src/useThemeProps/index.d.ts              |  2 +
 .../src/useThemeProps/index.js                |  1 +
 .../src/useThemeProps/useThemeProps.d.ts      |  1 +
 .../src/useThemeProps/useThemeProps.js        | 15 ++++
 packages/material-ui/src/Table/Table.js       | 24 +++++-
 .../material-ui/src/TableBody/TableBody.js    | 25 ++++--
 .../material-ui/src/TableCell/TableCell.js    | 19 +++--
 .../src/TableFooter/TableFooter.js            | 25 ++++--
 .../material-ui/src/TableHead/TableHead.js    | 25 ++++--
 packages/material-ui/src/TableRow/TableRow.js | 23 +++++-
 .../src/TableSortLabel/TableSortLabel.js      | 19 +++--
 packages/material-ui/src/styles/index.js      |  1 +
 .../material-ui/src/styles/useThemeProps.js   |  9 +++
 .../src/useMediaQuery/useMediaQueryTheme.js   | 14 +---
 pages/performance/table-mui.js                | 45 +++++++++++
 pages/performance/table-raw.js                | 38 +++++++++
 17 files changed, 316 insertions(+), 50 deletions(-)
 create mode 100644 packages/material-ui-styles/src/useThemeProps/index.d.ts
 create mode 100644 packages/material-ui-styles/src/useThemeProps/index.js
 create mode 100644 packages/material-ui-styles/src/useThemeProps/useThemeProps.d.ts
 create mode 100644 packages/material-ui-styles/src/useThemeProps/useThemeProps.js
 create mode 100644 packages/material-ui/src/styles/useThemeProps.js
 create mode 100644 pages/performance/table-mui.js
 create mode 100644 pages/performance/table-raw.js

diff --git a/packages/material-ui-benchmark/src/core.js b/packages/material-ui-benchmark/src/core.js
index 49b2f7323cdfc1..cbba0381733bd9 100644
--- a/packages/material-ui-benchmark/src/core.js
+++ b/packages/material-ui-benchmark/src/core.js
@@ -1,10 +1,15 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, react/no-array-index-key */
 
 import Benchmark from 'benchmark';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { StylesProvider } from '@material-ui/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
 
 const suite = new Benchmark.Suite('core', {
   onError: event => {
@@ -13,6 +18,65 @@ const suite = new Benchmark.Suite('core', {
 });
 Benchmark.options.minSamples = 100;
 
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+function TableMui() {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Dessert (100g serving)</TableCell>
+          <TableCell>Calories</TableCell>
+          <TableCell>Fat (g)</TableCell>
+          <TableCell>Carbs (g)</TableCell>
+          <TableCell>Protein (g)</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row, index) => (
+          <TableRow key={index}>
+            <TableCell component="th" scope="row">
+              {row.name}
+            </TableCell>
+            <TableCell>{row.calories}</TableCell>
+            <TableCell>{row.fat}</TableCell>
+            <TableCell>{row.carbs}</TableCell>
+            <TableCell>{row.protein}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function TableRaw() {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Dessert (100g serving)</th>
+          <th>Calories</th>
+          <th>Fat (g)</th>
+          <th>Carbs (g)</th>
+          <th>Protein (g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, index) => (
+          <tr key={index}>
+            <th scope="row">{row.name}</th>
+            <td>{row.calories}</td>
+            <td>{row.fat}</td>
+            <td>{row.carbs}</td>
+            <td>{row.protein}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
 function NakedButton(props) {
   return <button type="button" {...props} />;
 }
@@ -26,6 +90,20 @@ class HocButton extends React.Component {
 }
 
 suite
+  .add('TableRaw', () => {
+    ReactDOMServer.renderToString(
+      <StylesProvider sheetsCache={null} sheetsManager={new Map()}>
+        <TableRaw />
+      </StylesProvider>,
+    );
+  })
+  .add('TableMui', () => {
+    ReactDOMServer.renderToString(
+      <StylesProvider sheetsCache={null} sheetsManager={new Map()}>
+        <TableMui />
+      </StylesProvider>,
+    );
+  })
   .add('ButtonBase', () => {
     ReactDOMServer.renderToString(
       <StylesProvider sheetsManager={new Map()}>
diff --git a/packages/material-ui-styles/src/useThemeProps/index.d.ts b/packages/material-ui-styles/src/useThemeProps/index.d.ts
new file mode 100644
index 00000000000000..698a3e7fd49fb0
--- /dev/null
+++ b/packages/material-ui-styles/src/useThemeProps/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './useThemeProps';
+export * from './useThemeProps';
diff --git a/packages/material-ui-styles/src/useThemeProps/index.js b/packages/material-ui-styles/src/useThemeProps/index.js
new file mode 100644
index 00000000000000..9bc4fe796288cd
--- /dev/null
+++ b/packages/material-ui-styles/src/useThemeProps/index.js
@@ -0,0 +1 @@
+export { default } from './useThemeProps';
diff --git a/packages/material-ui-styles/src/useThemeProps/useThemeProps.d.ts b/packages/material-ui-styles/src/useThemeProps/useThemeProps.d.ts
new file mode 100644
index 00000000000000..62ba8b27a0b845
--- /dev/null
+++ b/packages/material-ui-styles/src/useThemeProps/useThemeProps.d.ts
@@ -0,0 +1 @@
+export default function useThemeProps(props: any, options: any): any;
diff --git a/packages/material-ui-styles/src/useThemeProps/useThemeProps.js b/packages/material-ui-styles/src/useThemeProps/useThemeProps.js
new file mode 100644
index 00000000000000..4775971219caf2
--- /dev/null
+++ b/packages/material-ui-styles/src/useThemeProps/useThemeProps.js
@@ -0,0 +1,15 @@
+import useTheme from '../useTheme';
+import getThemeProps from '../getThemeProps';
+
+function useThemeProps(props, options) {
+  const { defaultTheme, name } = options;
+  const theme = useTheme() || defaultTheme;
+  const output = getThemeProps({
+    theme,
+    name,
+    props,
+  });
+  return output;
+}
+
+export default useThemeProps;
diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
index 81d260355393c8..0c790b068dc727 100644
--- a/packages/material-ui/src/Table/Table.js
+++ b/packages/material-ui/src/Table/Table.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
+import useThemeProps from '../styles/useThemeProps';
 import TableContext from './TableContext';
 
 export const styles = {
@@ -14,8 +15,18 @@ export const styles = {
   },
 };
 
+export const useStyles = makeStyles(styles, { name: 'MuiTable' });
+
 const Table = React.forwardRef(function Table(props, ref) {
-  const { classes, className, component: Component, padding, size, ...other } = props;
+  const {
+    classes: classesProp,
+    className,
+    component: Component,
+    padding,
+    size,
+    ...other
+  } = useThemeProps(props, { name: 'MuiTable' });
+  const classes = useStyles(props);
   const table = React.useMemo(() => ({ padding, size }), [padding, size]);
 
   return (
@@ -34,7 +45,7 @@ Table.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -65,4 +76,9 @@ Table.defaultProps = {
   size: 'medium',
 };
 
-export default withStyles(styles, { name: 'MuiTable' })(Table);
+Table.useStyles = useStyles;
+Table.options = {
+  name: 'MuiTable',
+};
+
+export default Table;
diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js
index fb4f6c7102c2c8..d69e9f388817a0 100644
--- a/packages/material-ui/src/TableBody/TableBody.js
+++ b/packages/material-ui/src/TableBody/TableBody.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
+import useThemeProps from '../styles/useThemeProps';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 
+const tablelvl2 = {
+  variant: 'body',
+};
+
 export const styles = {
   /* Styles applied to the root element. */
   root: {
@@ -11,12 +16,13 @@ export const styles = {
   },
 };
 
-const tablelvl2 = {
-  variant: 'body',
-};
+const useStyles = makeStyles(styles, { name: 'MuiTableBody' });
 
 const TableBody = React.forwardRef(function TableBody(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes: classesProp, className, component: Component, ...other } = useThemeProps(props, {
+    name: 'MuiTableBody',
+  });
+  const classes = useStyles(props);
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
@@ -34,7 +40,7 @@ TableBody.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -50,4 +56,9 @@ TableBody.defaultProps = {
   component: 'tbody',
 };
 
-export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);
+TableBody.useStyles = useStyles;
+TableBody.options = {
+  name: 'MuiTableBody',
+};
+
+export default TableBody;
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index 0b5480e8d876bf..ecbf6ca74afe8c 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
+import useThemeProps from '../styles/useThemeProps';
 import { capitalize } from '../utils/helpers';
 import { darken, fade, lighten } from '../styles/colorManipulator';
 import TableContext from '../Table/TableContext';
@@ -98,11 +99,13 @@ export const styles = theme => ({
   },
 });
 
+const useStyles = makeStyles(styles, { name: 'MuiTableCell' });
+
 const TableCell = React.forwardRef(function TableCell(props, ref) {
   const {
     align,
     children,
-    classes,
+    classes: classesProp,
     className,
     component,
     padding: paddingProp,
@@ -111,8 +114,9 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {
     sortDirection,
     variant,
     ...other
-  } = props;
+  } = useThemeProps(props, { name: 'MuiTableCell' });
 
+  const classes = useStyles(props);
   const table = React.useContext(TableContext);
   const tablelvl2 = React.useContext(Tablelvl2Context);
 
@@ -177,7 +181,7 @@ TableCell.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -216,4 +220,9 @@ TableCell.defaultProps = {
   align: 'inherit',
 };
 
-export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
+TableCell.useStyles = useStyles;
+TableCell.options = {
+  name: 'MuiTableCell',
+};
+
+export default TableCell;
diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js
index ba9e344a3d7560..c49260cff04566 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
+import useThemeProps from '../styles/useThemeProps';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 
+const tablelvl2 = {
+  variant: 'footer',
+};
+
 export const styles = {
   /* Styles applied to the root element. */
   root: {
@@ -11,12 +16,13 @@ export const styles = {
   },
 };
 
-const tablelvl2 = {
-  variant: 'footer',
-};
+const useStyles = makeStyles(styles, { name: 'MuiTableFooter' });
 
 const TableFooter = React.forwardRef(function TableFooter(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes: classesProp, className, component: Component, ...other } = useThemeProps(props, {
+    name: 'MuiTableFooter',
+  });
+  const classes = useStyles(props);
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
@@ -34,7 +40,7 @@ TableFooter.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -50,4 +56,9 @@ TableFooter.defaultProps = {
   component: 'tfoot',
 };
 
-export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
+TableFooter.useStyles = useStyles;
+TableFooter.options = {
+  name: 'MuiTableFooter',
+};
+
+export default TableFooter;
diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js
index fda71dced55d36..a61d0fa1cd5836 100644
--- a/packages/material-ui/src/TableHead/TableHead.js
+++ b/packages/material-ui/src/TableHead/TableHead.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
+import useThemeProps from '../styles/useThemeProps';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 
+const tablelvl2 = {
+  variant: 'head',
+};
+
 export const styles = {
   /* Styles applied to the root element. */
   root: {
@@ -11,12 +16,13 @@ export const styles = {
   },
 };
 
-const tablelvl2 = {
-  variant: 'head',
-};
+const useStyles = makeStyles(styles, { name: 'MuiTableHead' });
 
 const TableHead = React.forwardRef(function TableHead(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes: classesProp, className, component: Component, ...other } = useThemeProps(props, {
+    name: 'MuiTableHead',
+  });
+  const classes = useStyles(props);
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
@@ -34,7 +40,7 @@ TableHead.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -50,4 +56,9 @@ TableHead.defaultProps = {
   component: 'thead',
 };
 
-export default withStyles(styles, { name: 'MuiTableHead' })(TableHead);
+TableHead.useStyles = useStyles;
+TableHead.options = {
+  name: 'MuiTableHead',
+};
+
+export default TableHead;
diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
index 2d49ac4732ec86..792bad36e1c36f 100644
--- a/packages/material-ui/src/TableRow/TableRow.js
+++ b/packages/material-ui/src/TableRow/TableRow.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 
 export const styles = theme => ({
@@ -35,13 +35,23 @@ export const styles = theme => ({
   footer: {},
 });
 
+const useStyles = makeStyles(styles, { name: 'MuiTableRow' });
+
 /**
  * Will automatically set dynamic row height
  * based on the material table element parent (head, body, etc).
  */
 const TableRow = React.forwardRef(function TableRow(props, ref) {
-  const { classes, className, component: Component, hover, selected, ...other } = props;
+  const {
+    classes: classesProp,
+    className,
+    component: Component,
+    hover,
+    selected,
+    ...other
+  } = props;
   const tablelvl2 = React.useContext(Tablelvl2Context);
+  const classes = useStyles(props);
 
   return (
     <Component
@@ -70,7 +80,7 @@ TableRow.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -96,4 +106,9 @@ TableRow.defaultProps = {
   selected: false,
 };
 
-export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);
+TableRow.useStyles = useStyles;
+TableRow.options = {
+  name: 'MuiTableRow',
+};
+
+export default TableRow;
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
index d4e8b5f1470998..4f114f62663348 100644
--- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js
+++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
@@ -4,7 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
-import withStyles from '../styles/withStyles';
+import makeStyles from '../styles/makeStyles';
+import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';
 import { capitalize } from '../utils/helpers';
 
@@ -59,6 +60,8 @@ export const styles = theme => ({
   },
 });
 
+const useStyles = makeStyles(styles, { name: 'MuiTableSortLabel' });
+
 /**
  * A button based label for placing inside `TableCell` for column sorting.
  */
@@ -66,13 +69,14 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) {
   const {
     active,
     children,
-    classes,
+    classes: classesProp,
     className,
     direction,
     hideSortIcon,
     IconComponent,
     ...other
-  } = props;
+  } = useThemeProps(props, { name: 'MuiTableSortLabel' });
+  const classes = useStyles(props);
 
   return (
     <ButtonBase
@@ -105,7 +109,7 @@ TableSortLabel.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -131,4 +135,9 @@ TableSortLabel.defaultProps = {
   IconComponent: ArrowDownwardIcon,
 };
 
-export default withStyles(styles, { name: 'MuiTableSortLabel' })(TableSortLabel);
+TableSortLabel.useStyles = useStyles;
+TableSortLabel.options = {
+  name: 'MuiTableSortLabel',
+};
+
+export default TableSortLabel;
diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js
index 426aacd6007aaa..5c6a62f2a615af 100644
--- a/packages/material-ui/src/styles/index.js
+++ b/packages/material-ui/src/styles/index.js
@@ -6,5 +6,6 @@ export { default as MuiThemeProvider } from './MuiThemeProvider';
 export { default as styled } from './styled';
 export * from './transitions';
 export { default as useTheme } from './useTheme';
+export { default as useThemeProps } from './useThemeProps';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
diff --git a/packages/material-ui/src/styles/useThemeProps.js b/packages/material-ui/src/styles/useThemeProps.js
new file mode 100644
index 00000000000000..3a8bc9e047767c
--- /dev/null
+++ b/packages/material-ui/src/styles/useThemeProps.js
@@ -0,0 +1,9 @@
+import useThemePropsWithoutDefault from '@material-ui/styles/useThemeProps';
+import defaultTheme from './defaultTheme';
+
+export default function useThemeProps(props, options) {
+  return useThemePropsWithoutDefault(props, {
+    defaultTheme,
+    ...options,
+  });
+}
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
index e2587ef69849c6..5f4dc6406a1856 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQueryTheme.js
@@ -1,15 +1,9 @@
-import { useTheme, getThemeProps } from '@material-ui/styles';
+import useThemeProps from '@material-ui/styles/useThemeProps';
 import useMediaQuery from './useMediaQuery';
 
-function useMediaQueryTheme(query, options) {
-  const theme = useTheme();
-  const props = getThemeProps({
-    theme,
-    name: 'MuiUseMediaQuery',
-    props: {},
-  });
-
-  return useMediaQuery(query, { ...props, ...options });
+function useMediaQueryTheme(query, options = {}) {
+  const options2 = useThemeProps(options, { name: 'MuiUseMediaQuery' });
+  return useMediaQuery(query, options2);
 }
 
 export default useMediaQueryTheme;
diff --git a/pages/performance/table-mui.js b/pages/performance/table-mui.js
new file mode 100644
index 00000000000000..6903b5b1344830
--- /dev/null
+++ b/pages/performance/table-mui.js
@@ -0,0 +1,45 @@
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react';
+import NoSsr from '@material-ui/core/NoSsr';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+function TableMui() {
+  return (
+    <NoSsr defer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell>Calories</TableCell>
+            <TableCell>Fat (g)</TableCell>
+            <TableCell>Carbs (g)</TableCell>
+            <TableCell>Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow key={index}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell>{row.calories}</TableCell>
+              <TableCell>{row.fat}</TableCell>
+              <TableCell>{row.carbs}</TableCell>
+              <TableCell>{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </NoSsr>
+  );
+}
+
+export default TableMui;
diff --git a/pages/performance/table-raw.js b/pages/performance/table-raw.js
new file mode 100644
index 00000000000000..062557b39e5aa6
--- /dev/null
+++ b/pages/performance/table-raw.js
@@ -0,0 +1,38 @@
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
+const rows = Array.from(new Array(100)).map(() => data);
+
+function TableRaw() {
+  return (
+    <NoSsr defer>
+      <table>
+        <thead>
+          <tr>
+            <th>Dessert (100g serving)</th>
+            <th>Calories</th>
+            <th>Fat (g)</th>
+            <th>Carbs (g)</th>
+            <th>Protein (g)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={index}>
+              <th scope="row">{row.name}</th>
+              <td>{row.calories}</td>
+              <td>{row.fat}</td>
+              <td>{row.carbs}</td>
+              <td>{row.protein}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </NoSsr>
+  );
+}
+
+export default TableRaw;