perf: damage clumping

app/ecs/components/vulnerable.js

@@ -31,7 +31,11 @@ export default class Vulnerable extends Component {
             }
           }
         }
-        Component.markChange(this.entity, 'damage', {[this.id++]: specification});
+        Component.markChange(
+          this.entity,
+          'damage',
+          {[`${this.entity}-${this.id++}`]: specification},
+        );
       }
     };
   }

app/react/components/dom/entities.jsx

@@ -16,6 +16,7 @@ export default function Entities({
   const [ecs] = useEcs();
   const [entities, setEntities] = useState({});
   const [damages, setDamages] = useState({});
+  const [pendingDamage] = useState({accumulated: [], handle: undefined});
   usePacket('EcsChange', async () => {
     setEntities({});
   }, [setEntities]);
@@ -93,17 +94,31 @@ export default function Entities({
       const {damage} = update.Vulnerable || {};
       if (damage) {
         for (const key in damage) {
-          const composite = [id, key].join('-');
           damage[key].onClose = () => {
             setDamages((damages) => {
-              const {[composite]: _, ...rest} = damages; // eslint-disable-line no-unused-vars
+              const {[key]: _, ...rest} = damages; // eslint-disable-line no-unused-vars
               return rest;
             })
           };
-          setDamages((damages) => ({
+        }
-            ...damages,
+        pendingDamage.accumulated.push(damage);
-            [composite]: damage[key],
+        if (!pendingDamage.handle) {
-          }));
+          pendingDamage.handle = setTimeout(() => {
+            const update = {};
+            for (const damage of pendingDamage.accumulated) {
+              for (const key in damage) {
+                update[key] = damage[key];
+              }
+            }
+            pendingDamage.accumulated.length = 0;
+            setDamages((damages) => {
+              return {
+                ...damages,
+                ...update,
+              };
+            });
+            pendingDamage.handle = undefined;
+          }, 50);
         }
       }
     }