fix: external bag race condition

app/react/components/dom/external.jsx

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

app/react/components/ui.jsx

@@ -383,6 +383,12 @@ function Ui({disconnected}) {
       payload: {type: 'swapSlots', value: [0, mainEntityRef.current, i + 11]},
     });
   }, [client, mainEntityRef]);
+  const externalInventoryOnActivate = useCallback((i) => {
+    client.send({
+      type: 'Action',
+      payload: {type: 'swapSlots', value: [0, externalInventory, i]},
+    });
+  }, [client, externalInventory]);
   return (
     <div
       className={styles.ui}
@@ -508,12 +514,7 @@ function Ui({disconnected}) {
           {externalInventory && (
             <External
               isInventoryOpen={isInventoryOpen}
-              onActivate={(i) => {
-                client.send({
-                  type: 'Action',
-                  payload: {type: 'swapSlots', value: [0, externalInventory, i]},
-                });
-              }}
+              onActivate={externalInventoryOnActivate}
               slots={externalInventorySlots}
             />
           )}