chore: tidy & perf

app/ecs/ecs.js

@@ -1,5 +1,4 @@
 import EntityFactory from './entity-factory.js';
-import Schema from './schema.js';
 
 import {Encoder, Decoder} from '@msgpack/msgpack';
 
@@ -281,6 +280,9 @@ export default class Ecs {
       existing.push(...this.$$entities[entityId].constructor.componentNames);
     }
     const Class = this.$$entityFactory.makeClass(componentNames(existing), this.Components);
+    if (this.$$entities[entityId] && Class === this.$$entities[entityId].constructor) {
+      // Eventually - memoizable.
+    }
     this.$$entities[entityId] = new Class(entityId);
   }
 

app/react-components/entities.jsx

@@ -1,65 +1,14 @@
-import {Container, Graphics} from '@pixi/react';
-import {useCallback} from 'react';
-
-import {useDebug} from '@/context/debug.js';
-
-import Emitter from './emitter.jsx';
-import Sprite from './sprite.jsx';
-
-function Crosshair({x, y}) {
-  const draw = useCallback((g) => {
-    g.clear();
-    g.lineStyle(1, 0x000000);
-    g.moveTo(-5, 0);
-    g.lineTo(5, 0);
-    g.moveTo(0, -5);
-    g.lineTo(0, 5);
-    g.lineStyle(0.5, 0xffffff);
-    g.moveTo(-5, 0);
-    g.lineTo(5, 0);
-    g.moveTo(0, -5);
-    g.lineTo(0, 5);
-    g.lineStyle(1, 0x000000);
-    g.drawCircle(0, 0, 3);
-    g.lineStyle(0.5, 0xffffff);
-    g.drawCircle(0, 0, 3);
-  }, []);
-  return (
-    <Graphics draw={draw} x={x} y={y} />
-  );
-}
+import Entity from './entity.jsx';
 
 export default function Entities({entities}) {
-  const [debug] = useDebug();
   const renderables = [];
   for (const id in entities) {
-    const entity = entities[id];
-    if (!entity || !entity.Position || !entity.Sprite) {
-      continue;
-    }
     renderables.push(
-      <Container
+      <Entity
+        entity={entities[id]}
         key={id}
-      >
-        {entity.Sprite && (
-          <Sprite
-            entity={entity}
-          />
-        )}
-        {entity.Emitter && (
-          <Emitter
-            entity={entity}
-          />
-        )}
-        {debug && (
-          <Crosshair x={entity.Position.x} y={entity.Position.y} />
-        )}
-      </Container>
+      />
     );
   }
-  return (
-    <>
-      {renderables}
-    </>
-  )
+  return <>{renderables}</>;
 }

app/react-components/entity.jsx

@@ -0,0 +1,56 @@
+import {Container, Graphics} from '@pixi/react';
+import {memo, useCallback} from 'react';
+
+import {useDebug} from '@/context/debug.js';
+
+import Emitter from './emitter.jsx';
+import Sprite from './sprite.jsx';
+
+function Crosshair({x, y}) {
+  const draw = useCallback((g) => {
+    g.clear();
+    g.lineStyle(1, 0x000000);
+    g.moveTo(-5, 0);
+    g.lineTo(5, 0);
+    g.moveTo(0, -5);
+    g.lineTo(0, 5);
+    g.lineStyle(0.5, 0xffffff);
+    g.moveTo(-5, 0);
+    g.lineTo(5, 0);
+    g.moveTo(0, -5);
+    g.lineTo(0, 5);
+    g.lineStyle(1, 0x000000);
+    g.drawCircle(0, 0, 3);
+    g.lineStyle(0.5, 0xffffff);
+    g.drawCircle(0, 0, 3);
+  }, []);
+  return (
+    <Graphics draw={draw} x={x} y={y} />
+  );
+}
+
+function Entities({entity}) {
+  const [debug] = useDebug();
+  if (!entity) {
+    return false;
+  }
+  return (
+    <Container>
+      {entity.Sprite && (
+        <Sprite
+          entity={entity}
+        />
+      )}
+      {entity.Emitter && (
+        <Emitter
+          entity={entity}
+        />
+      )}
+      {debug && entity.Position && (
+        <Crosshair x={entity.Position.x} y={entity.Position.y} />
+      )}
+    </Container>
+  );
+}
+
+export default memo(Entities);