perf: memo

app/react/components/dom/bag.jsx

@@ -1,3 +1,5 @@
+import {memo} from 'react';
+
 import styles from './bag.module.css';
 
 import Grid from './grid.jsx';
@@ -5,7 +7,7 @@ import Grid from './grid.jsx';
 /**
  * Inventory bag. 10-40 slots of inventory.
  */
-export default function Bag({
+function Bag({
   isInventoryOpen,
   onActivate,
   slots,
@@ -25,3 +27,5 @@ export default function Bag({
     </div>
   );
 }
+
+export default memo(Bag);

app/react/components/dom/hotbar.jsx

@@ -1,3 +1,5 @@
+import {memo} from 'react';
+
 import styles from './hotbar.module.css';
 import gridStyles from './grid.module.css';
 
@@ -6,7 +8,7 @@ import Grid from './grid.jsx';
 /**
  * The hotbar. 10 slots of inventory with an active selection.
  */
-export default function Hotbar({
+function Hotbar({
   active,
   hotbarIsHidden,
   onActivate,
@@ -33,3 +35,5 @@ export default function Hotbar({
     </div>
   );
 }
+
+export default memo(Hotbar);

app/react/components/ui.jsx

@@ -26,7 +26,7 @@ const KEY_MAP = {
 };
 
 function emptySlots() {
-  return Array(50).fill(undefined);
+  return Array(10).fill(undefined);
 }
 
 const devEventsChannel = new EventEmitter();
@@ -45,6 +45,7 @@ function Ui({disconnected}) {
   const [devtoolsIsOpen, setDevtoolsIsOpen] = useState(false);
   const ratio = (RESOLUTION.x * (devtoolsIsOpen ? 2 : 1)) / RESOLUTION.y;
   const [camera, setCamera] = useState({x: 0, y: 0});
+  const [hotbarSlots, setHotbarSlots] = useState(emptySlots());
   const [inventorySlots, setInventorySlots] = useState(emptySlots());
   const [activeSlot, setActiveSlot] = useState(0);
   const [scale, setScale] = useState(2);
@@ -265,9 +266,16 @@ function Ui({disconnected}) {
       if (update.Inventory) {
         if (mainEntityRef.current === id) {
           setBufferSlot(entity.Inventory.item(0));
+          setHotbarSlots(() => {
+            const newHotbarSlots = [];
+            for (let i = 1; i < 11; ++i) {
+              newHotbarSlots.push(entity.Inventory.item(i));
+            }
+            return newHotbarSlots;
+          });
           const newInventorySlots = emptySlots();
-          for (let i = 1; i < 41; ++i) {
+          for (let i = 11; i < 41; ++i) {
-            newInventorySlots[i - 1] = entity.Inventory.item(i);
+            newInventorySlots[i - 11] = entity.Inventory.item(i);
           }
           setInventorySlots(newInventorySlots);
         }
@@ -382,6 +390,19 @@ function Ui({disconnected}) {
     mainEntityRef,
     scale,
   ]);
+  const hotbarOnActivate = useCallback((i) => {
+    keepHotbarOpen();
+    client.send({
+      type: 'Action',
+      payload: {type: 'swapSlots', value: [0, mainEntityRef.current, i + 1]},
+    });
+  }, [client, keepHotbarOpen, mainEntityRef]);
+  const bagOnActivate = useCallback((i) => {
+    client.send({
+      type: 'Action',
+      payload: {type: 'swapSlots', value: [0, mainEntityRef.current, i + 11]},
+    });
+  }, [client, mainEntityRef]);
   return (
     <div
       className={styles.ui}
@@ -496,24 +517,13 @@ function Ui({disconnected}) {
           <HotBar
             active={activeSlot}
             hotbarIsHidden={hotbarIsHidden}
-            onActivate={(i) => {
+            onActivate={hotbarOnActivate}
-              keepHotbarOpen();
+            slots={hotbarSlots}
-              client.send({
-                type: 'Action',
-                payload: {type: 'swapSlots', value: [0, mainEntityRef.current, i + 1]},
-              });
-            }}
-            slots={inventorySlots.slice(0, 10)}
           />
           <Bag
             isInventoryOpen={isInventoryOpen}
-            onActivate={(i) => {
+            onActivate={bagOnActivate}
-              client.send({
+            slots={inventorySlots}
-                type: 'Action',
-                payload: {type: 'swapSlots', value: [0, mainEntityRef.current, i + 11]},
-              });
-            }}
-            slots={inventorySlots.slice(10, 20)}
           />
           {externalInventory && (
             <External