added Profiler

Author: mnajdova

test/perf/tests/box-emotion/index.js

@@ -1,16 +1,17 @@
 
-import React from 'react';
+import React, { Profiler } from 'react';
 import { createMuiTheme } from '@material-ui/core/styles';
 import styledEmotion from '@emotion/styled';
 import { ThemeProvider as EmotionTheme } from 'emotion-theming';
 import { styleFunction } from '@material-ui/core/Box';
+import { logReactMetrics } from '../utils';
 
 const materialSystemTheme = createMuiTheme();
 const BoxEmotion = styledEmotion('div')(styleFunction);
 
 const App = () => {
   return (
-    <>
+    <Profiler id="box-emotion" onRender={logReactMetrics}>
       {new Array(100).fill().map(() => (
         <EmotionTheme theme={materialSystemTheme}>
           <BoxEmotion
@@ -24,7 +25,7 @@ const App = () => {
           </BoxEmotion>
       </EmotionTheme>
       ))}
-    </>
+    </Profiler>
   );
 }
 

test/perf/tests/box-material-ui-styles/index.js

@@ -1,14 +1,15 @@
 
-import React from 'react';
+import React, { Profiler } from 'react';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
 import BoxStyles from '@material-ui/core/Box';
+import { logReactMetrics } from '../utils';
 
 const materialSystemTheme = createMuiTheme();
 
 const App = () => {
   return (
-    <>
+    <Profiler id="box-material-ui-system" onRender={logReactMetrics}>
       {new Array(100).fill().map(() => (
         <StylesThemeProvider theme={materialSystemTheme}>
           <BoxStyles
@@ -23,7 +24,7 @@ const App = () => {
           </BoxStyles>
         </StylesThemeProvider>
       ))}
-    </>        
+    </Profiler>        
   );
 }
 

test/perf/tests/box-styled-components/index.js

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { Profiler } from 'react';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { styleFunction } from '@material-ui/core/Box';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
+import { logReactMetrics } from '../utils';
 
 const materialSystemTheme = createMuiTheme();
 const BoxStyleComponents = styledComponents('div')(styleFunction);
 
 const App = () => {
   return (
-    <>
+    <Profiler id="box-styled-components" onRender={logReactMetrics}>
       {new Array(100).fill().map(() => (
         <StyledComponentsThemeProvider theme={materialSystemTheme}>
           <BoxStyleComponents
@@ -25,7 +26,7 @@ const App = () => {
           </BoxStyleComponents>
         </StyledComponentsThemeProvider>
       ))}
-    </>        
+    </Profiler>        
   );
 }
 

test/perf/tests/naked-styled-components/index.js

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { Profiler } from 'react';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { spacing } from '@material-ui/system';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
+import { logReactMetrics } from '../utils';
 
 const materialSystemTheme = createMuiTheme();
 const NakedStyleComponents = styledComponents('div')(spacing);
 
 const App = () => {
   return (
-    <>
+    <Profiler id="naked-styled-components" onRender={logReactMetrics}>
       {new Array(100).fill().map(() => (
         <StyledComponentsThemeProvider theme={materialSystemTheme}>
           <NakedStyleComponents
@@ -25,7 +26,7 @@ const App = () => {
           </NakedStyleComponents>
         </StyledComponentsThemeProvider>
       ))}
-    </>          
+    </Profiler>          
   );
 }
 

test/perf/tests/styled-components-box-material-ui-system/index.js

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { Profiler } from 'react';
 import { createMuiTheme } from '@material-ui/core/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
 import { spacing, palette, typography, compose } from '@material-ui/system';
+import { logReactMetrics } from '../utils';
 
 const materialSystem = compose(palette, spacing, typography);
 const materialSystemTheme = createMuiTheme();
 const BoxMaterialSystem = styledComponents('div')(materialSystem);
 
 const App = () => {
   return (
-    <>
+    <Profiler id="styled-components-box-material-ui-system" onRender={logReactMetrics}>
       {new Array(100).fill().map(() => (
         <StyledComponentsThemeProvider theme={materialSystemTheme}>
           <BoxMaterialSystem
@@ -25,7 +26,7 @@ const App = () => {
           </BoxMaterialSystem>
         </StyledComponentsThemeProvider>
       ))}
-    </>            
+    </Profiler>            
   );
 }
 

test/perf/tests/styled-components-box-styled-system/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Profiler } from 'react';
 import { createMuiTheme } from '@material-ui/core/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
 import { space, color, fontFamily, fontSize, compose } from 'styled-system';
+import { logReactMetrics } from '../utils';
 
 const styledSystem = compose(color, space, fontFamily, fontSize);
 const BoxStyledSystem = styledComponents('div')(styledSystem);
@@ -16,7 +17,7 @@ styledSystemTheme.fonts = styledSystemTheme.typography;
 
 const App = () => {
   return (
-    <>
+    <Profiler id="styled-components-box-styled-system" onRender={logReactMetrics}>
       {new Array(100).fill().map(() => (
         <StyledComponentsThemeProvider theme={styledSystemTheme}>
           <BoxStyledSystem
@@ -30,7 +31,7 @@ const App = () => {
           </BoxStyledSystem>
         </StyledComponentsThemeProvider>
       ))}
-    </>             
+    </Profiler>             
   );
 }
 

test/perf/tests/utils/index.js

@@ -0,0 +1,19 @@
+export const logReactMetrics = (
+  id, // the "id" prop of the Profiler tree that has just committed
+  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
+  actualDuration, // time spent rendering the committed update
+  baseDuration, // estimated time to render the entire subtree without memoization
+  startTime, // when React began rendering this update
+  commitTime, // when React committed this update
+  interactions // the Set of interactions belonging to this update
+) => {
+  console.info({
+    id,
+    phase,
+    actualDuration,
+    baseDuration,
+    startTime,
+    commitTime,
+    interactions,
+  });
+}

test/perf/webpack.config.js

@@ -21,4 +21,12 @@ module.exports = {
       },
     ]),
   },
+  resolve: {
+    ...webpackBaseConfig.resolve,
+    alias: {
+      ...webpackBaseConfig.resolve.alias,
+      'react-dom$': 'react-dom/profiling',
+      'scheduler/tracing': 'scheduler/tracing-profiling',
+    }
+  }
 };