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..64b0c0ae86573d 100644
--- a/benchmark/browser/scripts/benchmark.js
+++ b/benchmark/browser/scripts/benchmark.js
@@ -154,6 +154,10 @@ async function run() {
         name: 'noop (baseline)',
         path: './noop/index.js',
       },
+      {
+        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;
 }
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
index 72f967fdb10874..f3c334db36ffb1 100644
--- a/packages/material-ui/src/Modal/Modal.js
+++ b/packages/material-ui/src/Modal/Modal.js
@@ -55,7 +55,7 @@ export const styles = (theme) => ({
  */
 const Modal = React.forwardRef(function Modal(inProps, ref) {
   const theme = useTheme();
-  const props = getThemeProps({ name: 'MuiModal', props: { ...inProps }, theme });
+  const props = getThemeProps({ name: 'MuiModal', props: inProps, theme });
   const {
     BackdropComponent = SimpleBackdrop,
     BackdropProps,
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index a224784e370d00..cfda2c0db22bd4 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -135,7 +135,7 @@ const transitionDurationDefault = { enter: duration.enteringScreen, exit: durati
 
 const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) {
   const theme = useTheme();
-  const props = getThemeProps({ name: 'MuiSwipeableDrawer', props: { ...inProps }, theme });
+  const props = getThemeProps({ name: 'MuiSwipeableDrawer', props: inProps, theme });
   const {
     anchor = 'left',
     disableBackdropTransition = false,
diff --git a/packages/material-ui/src/styles/useThemeProps.js b/packages/material-ui/src/styles/useThemeProps.js
index 2187292b2053e1..336d382bac21ec 100644
--- a/packages/material-ui/src/styles/useThemeProps.js
+++ b/packages/material-ui/src/styles/useThemeProps.js
@@ -2,19 +2,14 @@ import { getThemeProps } from '@material-ui/styles';
 import useTheme from './useTheme';
 import defaultTheme from './defaultTheme';
 
-export default function useThemeProps({ props: inputProps, name }) {
-  const props = { ...inputProps };
-
+export default function useThemeProps({ props, name }) {
   const contextTheme = useTheme() || defaultTheme;
-
   const more = getThemeProps({ theme: contextTheme, name, props });
-
   const theme = more.theme || contextTheme;
-  const isRtl = theme.direction === 'rtl';
 
   return {
     theme,
-    isRtl,
+    isRtl: theme.direction === 'rtl',
     ...more,
   };
 }
diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js
index 84a5af2255bdc2..49597edd1ae572 100644
--- a/packages/material-ui/src/withWidth/withWidth.js
+++ b/packages/material-ui/src/withWidth/withWidth.js
@@ -37,7 +37,7 @@ const withWidth = (options = {}) => (Component) => {
     const { initialWidth, width, ...other } = getThemeProps({
       theme,
       name: 'MuiWithWidth',
-      props: { ...props },
+      props,
     });
 
     const [mountedState, setMountedState] = React.useState(false);
diff --git a/packages/typescript-to-proptypes/test/getThemeProps/input.js b/packages/typescript-to-proptypes/test/getThemeProps/input.js
index e58e9b85bc292a..c250de424ba14a 100644
--- a/packages/typescript-to-proptypes/test/getThemeProps/input.js
+++ b/packages/typescript-to-proptypes/test/getThemeProps/input.js
@@ -1,5 +1,5 @@
 export default function Modal(inProps) {
-  const props = getThemeProps({ props: { ...inProps } });
+  const props = getThemeProps({ props: inProps });
   const { onKeyDown, ...other } = props;
 
   function handleKeyDown(event) {
diff --git a/packages/typescript-to-proptypes/test/getThemeProps/output.js b/packages/typescript-to-proptypes/test/getThemeProps/output.js
index 14ea3477ffc3d5..8ed85a950c19b4 100644
--- a/packages/typescript-to-proptypes/test/getThemeProps/output.js
+++ b/packages/typescript-to-proptypes/test/getThemeProps/output.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 function Modal(inProps) {
-  const props = getThemeProps({ props: { ...inProps } });
+  const props = getThemeProps({ props: inProps });
   const { onKeyDown, ...other } = props;
 
   function handleKeyDown(event) {