console: shouldComponentUpdate and componentWilLReceiveProps tweaks

client/modules/IDE/components/Console.js

@@ -18,32 +18,31 @@ class Console extends React.Component {
     this.children = [];
   }
 
-  shouldComponentUpdate(nextProps) {
-    // clear children if paused, but only update when new consoleEvent happens
-    if (!nextProps.isPlaying) {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isPlaying && !this.props.isPlaying) {
       this.children = [];
-    }
-    return nextProps.consoleEvent !== this.props.consoleEvent;
-  }
-
-  render() {
-    const args = this.props.consoleEvent.arguments;
-    const method = this.props.consoleEvent.method;
-
+    } else if (nextProps.consoleEvent !== this.props.consoleEvent) {
+      const args = nextProps.consoleEvent.arguments;
+      const method = nextProps.consoleEvent.method;
       const nextChild = (
         <div key={this.children.length} className={method}>
           {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
         </div>
       );
       this.children.push(nextChild);
-
-    if (this.children.length > consoleMax) {
-      this.children = this.children.slice(0, 1);
     }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
+  }
+
+  render() {
+    const childrenToDisplay = this.children.slice(-consoleMax);
 
     return (
       <div ref="console" className="preview-console">
-        {this.children}
+        {childrenToDisplay}
       </div>
     );
   }