From f18cbb93301925c7d2c363c2ae8c013712066048 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 12 Feb 2021 23:49:23 +0100
Subject: [PATCH] add test case

---
 .../browser/scenarios/table-cell/index.js     | 38 +++++++++++++++++++
 benchmark/browser/scripts/benchmark.js        |  5 +++
 docs/pages/performance/table-component.js     |  4 +-
 docs/pages/performance/table-emotion.js       |  4 +-
 docs/pages/performance/table-hook.js          |  4 +-
 docs/pages/performance/table-mui.js           |  4 +-
 docs/pages/performance/table-raw.js           |  4 +-
 .../performance/table-styled-components.js    |  4 +-
 .../src/getThemeProps/getThemeProps.js        |  8 ++--
 9 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 benchmark/browser/scenarios/table-cell/index.js

diff --git a/benchmark/browser/scenarios/table-cell/index.js b/benchmark/browser/scenarios/table-cell/index.js
new file mode 100644
index 00000000000000..498ef636936e86
--- /dev/null
+++ b/benchmark/browser/scenarios/table-cell/index.js
@@ -0,0 +1,38 @@
+import * as React from 'react';
+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);
+
+export default function TableCellCase() {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Dessert (100g serving)</TableCell>
+          <TableCell>Calories</TableCell>
+          <TableCell>Fat&nbsp;(g)</TableCell>
+          <TableCell>Carbs&nbsp;(g)</TableCell>
+          <TableCell>Protein&nbsp;(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>
+  );
+}
diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js
index 8c354db609788a..7faefdbc6ab084 100644
--- a/benchmark/browser/scripts/benchmark.js
+++ b/benchmark/browser/scripts/benchmark.js
@@ -154,6 +154,11 @@ async function run() {
         name: 'noop (baseline)',
         path: './noop/index.js',
       },
+      // Test that there no significant offset
+      {
+        name: 'Table',
+        path: './table-cell/index.js',
+      },
       // Test the cost of React primitives
       {
         name: 'React primitives',
diff --git a/docs/pages/performance/table-component.js b/docs/pages/performance/table-component.js
index 0e7803746ff27a..ae2e28f669a913 100644
--- a/docs/pages/performance/table-component.js
+++ b/docs/pages/performance/table-component.js
@@ -25,7 +25,7 @@ const TableBody = createComponent('tbody');
 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 TableComponent() {
+export default function TableComponent() {
   return (
     <NoSsr defer>
       <Table>
@@ -55,5 +55,3 @@ function TableComponent() {
     </NoSsr>
   );
 }
-
-export default TableComponent;
diff --git a/docs/pages/performance/table-emotion.js b/docs/pages/performance/table-emotion.js
index 00350540001e8d..2884168bdff9fb 100644
--- a/docs/pages/performance/table-emotion.js
+++ b/docs/pages/performance/table-emotion.js
@@ -31,7 +31,7 @@ const TableBody = createComponent('tbody');
 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 TableEmotion() {
+export default function TableEmotion() {
   return (
     <NoSsr defer>
       <Table>
@@ -61,5 +61,3 @@ function TableEmotion() {
     </NoSsr>
   );
 }
-
-export default TableEmotion;
diff --git a/docs/pages/performance/table-hook.js b/docs/pages/performance/table-hook.js
index 4c4a852960501a..b74bab759f34c9 100644
--- a/docs/pages/performance/table-hook.js
+++ b/docs/pages/performance/table-hook.js
@@ -33,7 +33,7 @@ const TableBody = createComponent('tbody');
 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 TableHook() {
+export default function TableHook() {
   return (
     <NoSsr defer>
       <Table>
@@ -63,5 +63,3 @@ function TableHook() {
     </NoSsr>
   );
 }
-
-export default TableHook;
diff --git a/docs/pages/performance/table-mui.js b/docs/pages/performance/table-mui.js
index f7e8f08ee7f9e5..d1c3031cb422a8 100644
--- a/docs/pages/performance/table-mui.js
+++ b/docs/pages/performance/table-mui.js
@@ -9,7 +9,7 @@ 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() {
+export default function TableMui() {
   return (
     <NoSsr defer>
       <Table>
@@ -39,5 +39,3 @@ function TableMui() {
     </NoSsr>
   );
 }
-
-export default TableMui;
diff --git a/docs/pages/performance/table-raw.js b/docs/pages/performance/table-raw.js
index 9deab04893efdb..825d77898a01bf 100644
--- a/docs/pages/performance/table-raw.js
+++ b/docs/pages/performance/table-raw.js
@@ -4,7 +4,7 @@ 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() {
+export default function TableRaw() {
   return (
     <NoSsr defer>
       <table>
@@ -32,5 +32,3 @@ function TableRaw() {
     </NoSsr>
   );
 }
-
-export default TableRaw;
diff --git a/docs/pages/performance/table-styled-components.js b/docs/pages/performance/table-styled-components.js
index 51fec54b3b40d2..b47b3ab184743c 100644
--- a/docs/pages/performance/table-styled-components.js
+++ b/docs/pages/performance/table-styled-components.js
@@ -28,7 +28,7 @@ const TableBody = createComponent('tbody');
 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 TableStyledComponents() {
+export default function TableStyledComponents() {
   return (
     <NoSsr defer>
       <Table>
@@ -58,5 +58,3 @@ function TableStyledComponents() {
     </NoSsr>
   );
 }
-
-export default TableStyledComponents;
diff --git a/packages/material-ui-styles/src/getThemeProps/getThemeProps.js b/packages/material-ui-styles/src/getThemeProps/getThemeProps.js
index 5e6b6de2032c44..434d367d67a7cf 100644
--- a/packages/material-ui-styles/src/getThemeProps/getThemeProps.js
+++ b/packages/material-ui-styles/src/getThemeProps/getThemeProps.js
@@ -11,16 +11,18 @@ export default function getThemeProps(params) {
     return props;
   }
 
+  const output = { ...props };
+
   // Resolve default props, code borrow from React source.
   // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
   const defaultProps = theme.components[name].defaultProps;
   let propName;
 
   for (propName in defaultProps) {
-    if (props[propName] === undefined) {
-      props[propName] = defaultProps[propName];
+    if (output[propName] === undefined) {
+      output[propName] = defaultProps[propName];
     }
   }
 
-  return props;
+  return output;
 }