perf(gatsby-cli): avoid unnecesary rerenders for static messages in C…

…LI (#21955) * perf(gatsby-cli): avoid unnecesary work for static messages on CLI rerenders * make long and distinct name for array of memoized elements - are we java level yet? Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
gatsbyjs · Mar 9, 2020 · 5aff49d · 5aff49d
1 parent 4310f13
commit 5aff49d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/cli.js b/packages/gatsby-cli/src/reporter/loggers/ink/cli.js
@@ -17,6 +17,8 @@ class CLI extends React.Component {
     hasError: false,
   }
 
+  memoizedReactElementsForMessages = []
+
   componentDidCatch(error, info) {
     trackBuildError(`INK`, {
       error: {
@@ -51,6 +53,30 @@ class CLI extends React.Component {
       )
     }
 
+    /*
+      Only operation on messages array is to push new message into it. Once
+      message is there it can't change. Because of that we can do single
+      transform from message object to react element and store it.
+      This will avoid calling React.createElement completely for every message
+      that can't change.
+    */
+    if (messages.length > this.memoizedReactElementsForMessages.length) {
+      for (
+        let index = this.memoizedReactElementsForMessages.length;
+        index < messages.length;
+        index++
+      ) {
+        const msg = messages[index]
+        this.memoizedReactElementsForMessages.push(
+          msg.level === `ERROR` ? (
+            <Error details={msg} key={index} />
+          ) : (
+            <Message key={index} {...msg} />
+          )
+        )
+      }
+    }
+
     const spinners = []
     const progressBars = []
     if (showProgress) {
@@ -71,15 +97,7 @@ class CLI extends React.Component {
     return (
       <Box flexDirection="column">
         <Box flexDirection="column">
-          <Static>
-            {messages.map((msg, index) =>
-              msg.level === `ERROR` ? (
-                <Error details={msg} key={index} />
-              ) : (
-                <Message key={index} {...msg} />
-              )
-            )}
-          </Static>
+          <Static>{this.memoizedReactElementsForMessages}</Static>
 
           {spinners.map(activity => (
             <Spinner key={activity.id} {...activity} />

diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/components/error.js b/packages/gatsby-cli/src/reporter/loggers/ink/components/error.js
@@ -34,7 +34,7 @@ const DocsLink = ({ docsUrl }) => {
   )
 }
 
-const Error = ({ details }) => (
+const Error = React.memo(({ details }) => (
   // const stackLength = get(details, `stack.length`, 0
 
   <Box marginY={1} flexDirection="column">
@@ -75,6 +75,6 @@ const Error = ({ details }) => (
         </Box>
       )} */}
   </Box>
-)
+))
 
 export default Error
diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/components/messages.js b/packages/gatsby-cli/src/reporter/loggers/ink/components/messages.js
@@ -32,7 +32,7 @@ const getLabel = level => {
   }
 }
 
-export const Message = ({ level, text, duration, statusText }) => {
+export const Message = React.memo(({ level, text, duration, statusText }) => {
   let message = text
   if (duration) {
     message += ` - ${duration.toFixed(3)}s`
@@ -53,4 +53,4 @@ export const Message = ({ level, text, duration, statusText }) => {
       {message}
     </Box>
   )
-}
+})