[core] Only clone props if needed

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>
+  );
+}

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',

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;

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;

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;

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;

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;

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;

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;
 }

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,

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,

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,
   };
 }

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);

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) {

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) {