console: shouldComponentUpdate and componentWilLReceiveProps tweaks

client/modules/IDE/components/Console.js

@@ -18,32 +18,31 @@ class Console extends React.Component {
     this.children = [];
   }
 
-  shouldComponentUpdate(nextProps) {
+  componentWillReceiveProps(nextProps) {
-    // clear children if paused, but only update when new consoleEvent happens
+    if (nextProps.isPlaying && !this.props.isPlaying) {
-    if (!nextProps.isPlaying) {
       this.children = [];
+    } 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);
     }
-    return nextProps.consoleEvent !== this.props.consoleEvent;
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
   }
 
   render() {
-    const args = this.props.consoleEvent.arguments;
+    const childrenToDisplay = this.children.slice(-consoleMax);
-    const method = this.props.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);
-    }
 
     return (
       <div ref="console" className="preview-console">
-        {this.children}
+        {childrenToDisplay}
       </div>
     );
   }