add back shouldComponentUpdates =\

client/src/components/vbox.combiner.jsx

@@ -1,12 +1,25 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 
-function Combiner(args) {
+const addState = connect(({ vboxCombiner }) => ({ vboxCombiner }));
+
+class Combiner extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.vbox !== this.props.vbox) return true;
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
+        if (newProps.sendVboxCombine !== this.props.sendVboxCombine) return true;
+        if (newProps.vboxCombiner !== this.props.vboxCombiner) return true;
+        return false;
+    }
+
+    render(args) {
         const {
             vbox,
-        vboxCombiner,
             vboxSelected,
             vboxBuySelected,
             sendVboxCombine,
+            vboxCombiner,
         } = args;
 
         const { stashSelect, storeSelect } = vboxSelected;
@@ -40,5 +53,6 @@ function Combiner(args) {
 
         return false;
     }
+}
 
-module.exports = Combiner;
+module.exports = addState(Combiner);

client/src/components/vbox.combos.jsx

@@ -1,8 +1,24 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 
 const { convertItem } = require('../utils');
 
-function Combos(props) {
+const addState = connect(
+    ({ info, instance, itemInfo, tutorial, vboxInfo }) => ({
+        info, instance, itemInfo, tutorial, vboxInfo,
+    }));
+
+class Combos extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.info !== this.props.info) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.itemInfo !== this.props.itemInfo) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
+        return false;
+    }
+
+    render(props) {
         const {
             info,
             instance,
@@ -10,7 +26,6 @@ function Combos(props) {
             tutorial,
             vboxInfo,
         } = props;
-
         if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
 
         const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
@@ -47,5 +62,6 @@ function Combos(props) {
             </div>
         );
     }
+}
 
-module.exports = Combos;
+module.exports = addState(Combos);

client/src/components/vbox.component.jsx

@@ -4,8 +4,8 @@ const { connect } = require('preact-redux');
 const actions = require('../actions');
 
 const InfoContainer = require('./vbox.info');
-const { StashHdr, StashElement } = require('./vbox.stash');
+const StashElement = require('./vbox.stash');
-const { StoreHdr, StoreElement } = require('./vbox.store');
+const StoreElement = require('./vbox.store');
 const Combiner = require('./vbox.combiner');
 const Combos = require('./vbox.combos');
 
@@ -96,13 +96,11 @@ const addState = connect(
 
 class Vbox extends preact.Component {
     shouldComponentUpdate(newProps) {
-        // Single variable props
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.player !== this.props.player) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
-        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
-        if (newProps.player !== this.props.player) return true;
-        if (newProps.instance !== this.props.instance) return true;
         return false;
     }
 
@@ -110,13 +108,9 @@ class Vbox extends preact.Component {
         const {
             // Changing state variables
             itemUnequip,
-            info,
             instance,
             player,
             tutorial,
-            vboxCombiner,
-            vboxHighlight,
-            vboxInfo,
             vboxSelected,
             // Static
             itemInfo,
@@ -148,72 +142,94 @@ class Vbox extends preact.Component {
             return true;
         }
 
+        function storeHdr() {
+            return (
+                <div class="store-hdr">
+                    <h2
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => vboxHover(e, 'store')}> STORE
+                    </h2>
+                    <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
+                        {vbox.bits}b
+                    </h1>
+                    <button
+                        class='vbox-btn'
+                        onMouseOver={e => vboxHover(e, 'refill')}
+                        disabled={vbox.bits < 2
+                            || (tutorial && tutorial < 7
+                            && instance.time_control === 'Practice' && instance.rounds.length === 1)
+                        }
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={() => sendVboxDiscard()}>
+                        refill <br />
+                        2b
+                    </button>
+                </div>
+            );
+        }
+
+        function stashHdr() {
+            const refund = storeSelect.length === 0 && stashSelect.length === 1
+                ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
+                : 0;
+            const tutorialDisabled = tutorial && tutorial < 8
+                && instance.time_control === 'Practice' && instance.rounds.length === 1;
+            const refundBtn = (
+                <button
+                    disabled={tutorialDisabled || !refund}
+                    class='vbox-btn'
+                    onClick={e => e.stopPropagation()}
+                    onMouseDown={e => {
+                        e.stopPropagation();
+                        sendVboxReclaim(vboxSelected.stashSelect[0]);
+                    }}>
+                    refund <br />
+                    {refund}b
+                </button>
+            );
+
+            return (
+                <div class='stash-hdr'>
+                    <h2 onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => vboxHover(e, 'stash')}> STASH
+                    </h2>
+                    {refundBtn}
+                </div>
+            );
+        }
+
         // EVERYTHING
         return (
             <div class='vbox'>
-                <StoreHdr
+                {storeHdr()}
-                    instance={instance}
+                {stashHdr()}
-                    tutorial={tutorial}
-                    sendVboxDiscard={sendVboxDiscard}
-                    vbox={vbox}
-                    vboxHover={vboxHover}
-                />
                 <StoreElement
                     clearVboxSelected={clearVboxSelected}
-                    setInfo = {setInfo}
                     setVboxSelected={setVboxSelected}
-                    stashSelect = {stashSelect}
-                    storeSelect = {storeSelect}
                     vbox={vbox}
-                    vboxHighlight = {vboxHighlight}
-                    vboxHover = {vboxHover}
-                />
-                <StashHdr
-                    instance={instance}
-                    itemInfo={itemInfo}
-                    sendVboxReclaim={sendVboxReclaim}
-                    tutorial={tutorial}
-                    vbox={vbox}
-                    vboxHover={vboxHover}
                     vboxSelected={vboxSelected}
+                    vboxHover = {vboxHover}
                 />
                 <StashElement
-                    itemUnequip = {itemUnequip}
-                    stashSelect = {stashSelect}
-                    storeSelect = {storeSelect}
                     sendItemUnequip={sendItemUnequip}
                     setInfo={setInfo}
                     setVboxSelected={setVboxSelected}
                     vbox={vbox}
                     vboxBuySelected={vboxBuySelected}
-                    vboxHighlight = {vboxHighlight}
                     vboxHover={vboxHover}
                 />
                 <div class='info-combiner'>
                     <InfoContainer
                         clearTutorial={clearTutorial}
-                        info={info}
-                        instance={instance}
-                        itemInfo={itemInfo}
-                        player={player}
-                        tutorial={tutorial}
-                        vboxInfo={vboxInfo}
                     />
                     <Combiner
                         vbox={vbox}
-                        vboxCombiner={vboxCombiner}
                         vboxSelected={vboxSelected}
                         vboxBuySelected={vboxBuySelected}
                         sendVboxCombine={sendVboxCombine}
                     />
                 </div>
-                <Combos
+                <Combos />
-                    info={info}
-                    instance={instance}
-                    itemInfo={itemInfo}
-                    tutorial={tutorial}
-                    vboxInfo={vboxInfo}
-                />
             </div>
         );
     }

client/src/components/vbox.info.jsx

@@ -1,16 +1,34 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
+
 const { tutorialStage } = require('../tutorial.utils');
 const { genItemInfo } = require('./vbox.utils');
 
-function Info(props) {
+const addState = connect(
+    ({ info, player, tutorial, vboxInfo, itemInfo, instance }) => ({
+        info, player, tutorial, vboxInfo, itemInfo, instance,
+    }));
+
+
+class Info extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.clearTutorial !== this.props.clearTutorial) return true;
+        if (newProps.info !== this.props.info) return true;
+        if (newProps.player !== this.props.player) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
+        if (newProps.itemInfo !== this.props.itemInfo) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        return false;
+    }
+
+    render(props) {
         const {
-        // Variables that will change
+            clearTutorial,
             info,
             player,
             tutorial,
             vboxInfo,
-        // Static
-        clearTutorial,
             itemInfo,
             instance,
         } = props;
@@ -51,5 +69,6 @@ function Info(props) {
 
         return genItemInfo(info, itemInfo, player, info);
     }
+}
 
-module.exports = Info;
+module.exports = addState(Info);

client/src/components/vbox.stash.jsx

@@ -1,4 +1,6 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
+
 const range = require('lodash/range');
 const without = require('lodash/without');
 
@@ -6,60 +8,40 @@ const shapes = require('./shapes');
 const buttons = require('./buttons');
 const { removeTier } = require('../utils');
 
-function stashHdr(props) {
+const addState = connect(
-    const {
+    ({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));
-        instance,
-        itemInfo,
-        sendVboxReclaim,
-        tutorial,
-        vbox,
-        vboxHover,
-        vboxSelected,
-    } = props;
-    const { storeSelect, stashSelect } = vboxSelected;
-    const refund = storeSelect.length === 0 && stashSelect.length === 1
-        ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
-        : 0;
-    const tutorialDisabled = tutorial && tutorial < 8
-        && instance.time_control === 'Practice' && instance.rounds.length === 1;
-    const refundBtn = (
-        <button
-            disabled={tutorialDisabled || !refund}
-            class='vbox-btn'
-            onClick={e => e.stopPropagation()}
-            onMouseDown={e => {
-                e.stopPropagation();
-                sendVboxReclaim(vboxSelected.stashSelect[0]);
-            }}>
-            refund <br />
-            {refund}b
-        </button>
-    );
 
-    return (
+class stashElement extends preact.Component {
-        <div class='stash-hdr'>
+    shouldComponentUpdate(newProps) {
-            <h2 onTouchStart={e => e.target.scrollIntoView(true)}
+        if (newProps.sendItemUnequip !== this.props.sendItemUnequip) return true;
-                onMouseOver={e => vboxHover(e, 'stash')}> STASH
+        if (newProps.setInfo !== this.props.setInfo) return true;
-            </h2>
+        if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
-            {refundBtn}
+        if (newProps.vbox !== this.props.vbox) return true;
-        </div>
+        if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
-    );
+        if (newProps.vboxHover !== this.props.vboxHover) return true;
+
+        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        return false;
     }
 
-function stashElement(props) {
+    render(props) {
         const {
-        itemUnequip,
             sendItemUnequip,
             setInfo,
             setVboxSelected,
-        stashSelect,
-        storeSelect,
             vbox,
             vboxBuySelected,
-        vboxHighlight,
             vboxHover,
+
+            itemUnequip,
+            vboxHighlight,
+            vboxSelected,
         } = props;
 
+        const { storeSelect, stashSelect } = vboxSelected;
+
         const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;
 
         function stashClick(e) {
@@ -144,5 +126,6 @@ function stashElement(props) {
             </div>
         );
     }
+}
 
-module.exports = { stashHdr, stashElement };
+module.exports = addState(stashElement);

client/src/components/vbox.store.jsx

@@ -1,54 +1,36 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 const range = require('lodash/range');
 
 const shapes = require('./shapes');
 
-function storeHdr(props) {
+const addState = connect(({ vboxHighlight }) => ({ vboxHighlight }));
-    const {
-        instance,
-        tutorial,
-        sendVboxDiscard,
-        vbox,
-        vboxHover,
-    } = props;
 
-    return (
+class storeElement extends preact.Component {
-        <div class="store-hdr">
+    shouldComponentUpdate(newProps) {
-            <h2
+        if (newProps.clearVboxSelected !== this.props.clearVboxSelected) return true;
-                onTouchStart={e => e.target.scrollIntoView(true)}
+        if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
-                onMouseOver={e => vboxHover(e, 'store')}> STORE
+        if (newProps.vbox !== this.props.vbox) return true;
-            </h2>
+        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
-            <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
+        if (newProps.vboxHover !== this.props.vboxHover) return true;
-                {vbox.bits}b
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
-            </h1>
+        return false;
-            <button
-                class='vbox-btn'
-                onMouseOver={e => vboxHover(e, 'refill')}
-                disabled={vbox.bits < 2
-                    || (tutorial && tutorial < 7
-                    && instance.time_control === 'Practice' && instance.rounds.length === 1)
-                }
-                onClick={e => e.stopPropagation()}
-                onMouseDown={() => sendVboxDiscard()}>
-                refill <br />
-                2b
-            </button>
-        </div>
-    );
     }
 
-
+    render(props) {
-function storeElement(props) {
         const {
+            // passed
             clearVboxSelected,
             setVboxSelected,
-        storeSelect,
-        stashSelect,
             vbox,
-        vboxHighlight,
             vboxHover,
+            vboxSelected,
+            // state
+            vboxHighlight,
         } = props;
 
+        const { storeSelect, stashSelect } = vboxSelected;
+
         function availableBtn(v, group, index) {
             if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
             const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
@@ -108,5 +90,6 @@ function storeElement(props) {
             </div>
         );
     }
+}
 
-module.exports = { storeHdr, storeElement };
+module.exports = addState(storeElement);