add shouldComponentUpdate to vbox components

client/src/components/info.component.jsx

@@ -2,14 +2,13 @@ const preact = require('preact');
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
-const { Component } = require('preact');
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
 
-class InfoComponent extends Component {
+class InfoComponent extends preact.Component {
     shouldComponentUpdate(newProps) {
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.tutorial) return false; // We don't care about info during tutorial

client/src/components/instance.constructs.jsx

@@ -18,7 +18,6 @@ const addState = connect(
             account,
             itemInfo,
             itemEquip,
-            activeConstruct,
             navInstance,
             tutorial,
         } = state;
@@ -39,7 +38,6 @@ const addState = connect(
             itemInfo,
             itemEquip,
             navInstance,
-            activeConstruct,
             sendUnequip,
             tutorial,
         };
@@ -77,19 +75,21 @@ const addState = connect(
 
 function Construct(props) {
     const {
+        // Changing state variables
+        construct,
         iter,
         itemEquip,
-        construct,
+        itemInfo,
+        mobileVisible,
         player,
+        tutorial,
+        // Function Calls
         sendVboxApply,
+        sendUnequip,
         setActiveConstruct,
         setItemUnequip,
         setItemEquip,
-        itemInfo,
         setInfo,
-        sendUnequip,
-        mobileVisible,
-        tutorial,
     } = props;
 
     const { vbox } = player;
@@ -242,25 +242,37 @@ function Construct(props) {
     );
 }
 
-function InstanceConstructs(props) {
+class InstanceConstructs extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.itemEquip !== this.props.itemEquip) return true;
+        if (newProps.instance.phase !== this.props.instance.phase) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.navInstance !== this.props.navInstance) return true;
+        // JSON or Array objects
+        if (JSON.stringify(newProps.player) !== JSON.stringify(this.props.player)) return true;
+        return false;
+    }
+
+    render(props) {
         const {
-        activeConstruct,
+            // Changing state variables
             itemEquip,
+            instance, // we only change phase
+            navInstance,
             player,
-        instance,
+            tutorial,
-        // clearInfo,
+            // Static data
+            itemInfo,
+            // Function calls
             setInfo,
             setActiveConstruct,
-
             sendVboxApply,
-        itemInfo,
             setVboxHighlight,
             setItemUnequip,
             setItemEquip,
             sendUnequip,
-        navInstance,
-        tutorial,
         } = props;
+        console.log('grep constructs');
 
         if (!player) return false;
         if (instance.phase === 'Lobby') return false;
@@ -276,7 +288,6 @@ function InstanceConstructs(props) {
             return Construct({
                 iter: i,
                 construct: player.constructs[i],
-            activeConstruct,
                 itemEquip,
                 setItemUnequip,
                 setItemEquip,
@@ -298,5 +309,6 @@ function InstanceConstructs(props) {
             </div>
         );
     }
+}
 
 module.exports = addState(InstanceConstructs);

client/src/components/vbox.component.jsx

@@ -1,8 +1,9 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 const range = require('lodash/range');
 const countBy = require('lodash/countBy');
 const without = require('lodash/without');
-const { connect } = require('preact-redux');
+
 const { removeTier } = require('../utils');
 const shapes = require('./shapes');
 const actions = require('../actions');
@@ -95,31 +96,47 @@ const addState = connect(
 
 );
 
-function Vbox(args) {
+class Vbox extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        // Single variable props
+        if (newProps.combiner !== this.props.combiner) return true;
+        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+        if (newProps.reclaiming !== this.props.reclaiming) return true;
+        if (newProps.navInstance !== this.props.navInstance) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        // Don't bother if info changes during tutorial
+        if (!newProps.tutorial && newProps.info !== this.props.info) return true;
+        // JSON or Array objects
+        if (JSON.stringify(newProps.vboxSelected) !== JSON.stringify(this.props.vboxSelected)) return true;
+        if (JSON.stringify(newProps.player) !== JSON.stringify(this.props.player)) return true;
+        return false;
+    }
+
+    render(args) {
         const {
+            // Changing state variables
             combiner,
-        navInstance,
+            itemUnequip,
-        itemInfo,
             player,
             reclaiming,
+            tutorial,
+            navInstance,
+            info,
+            vboxSelected,
+
+            // Static
+            itemInfo,
+            // Function Calls
+            sendItemUnequip,
             sendVboxAccept,
             sendVboxCombine,
             sendVboxDiscard,
             sendVboxReclaim,
-
-        setCombiner,
-        setInfo,
-
-        vboxSelected,
             setVboxSelected,
-
             setItemEquip,
-        tutorial,
+            setInfo,
-        itemUnequip,
+            setCombiner,
-        sendItemUnequip,
-
             setReclaiming,
-        info,
         } = args;
 
         if (!player) return false;
@@ -423,5 +440,6 @@ function Vbox(args) {
             </div>
         );
     }
+}
 
 module.exports = addState(Vbox);