diff --git a/docs/src/pages/utils/transitions/SimpleGrow.js b/docs/src/pages/utils/transitions/SimpleGrow.js
index c1cde84522aec5..b04372ba9fbe61 100644
--- a/docs/src/pages/utils/transitions/SimpleGrow.js
+++ b/docs/src/pages/utils/transitions/SimpleGrow.js
@@ -39,27 +39,26 @@ class SimpleGrow extends React.Component {
     const { classes } = this.props;
     const { checked } = this.state;
 
+    const polygon = (
+      <Paper elevation={4} className={classes.paper}>
+        <svg className={classes.svg}>
+          <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+        </svg>
+      </Paper>
+    );
+
     return (
       <div className={classes.root}>
         <Switch checked={checked} onChange={this.handleChange} aria-label="Collapse" />
         <div className={classes.container}>
-          <Grow in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Grow>
+          <Grow in={checked}>{polygon}</Grow>
+          {/* Conditionally applies the timeout property to change the entry speed. */}
           <Grow
             in={checked}
             style={{ transformOrigin: '0 0 0' }}
             {...(checked ? { timeout: 1000 } : {})}
           >
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
+            {polygon}
           </Grow>
         </div>
       </div>