perf: filter application

app/react-components/ecs.jsx

@@ -82,6 +82,7 @@ function createLayerMask(layer) {
 export default function Ecs({applyFilters, scale}) {
   const [ecs] = useEcs();
   const [entities, setEntities] = useState({});
+  const [filters, setFilters] = useState([]);
   const [mainEntity] = useMainEntity();
   const [hour, setHour] = useState(10);
   const [night, setNight] = useState();
@@ -149,6 +150,13 @@ export default function Ecs({applyFilters, scale}) {
     }
     setEntities(updatedEntities);
   }, [ecs, entities, mainEntity]);
+  useEffect(() => {
+    setFilters(
+      applyFilters
+        ? [night]
+        : [],
+    );
+  }, [applyFilters, night])
   if (!ecs || !mainEntity) {
     return false;
   }
@@ -162,10 +170,6 @@ export default function Ecs({applyFilters, scale}) {
   const {TileLayers, Water: WaterEcs} = ecs.get(1);
   const layer0 = TileLayers.layer(0);
   const layer1 = TileLayers.layer(1);
-  const filters = [];
-  if (applyFilters && night) {
-    filters.push(night);
-  }
   const [cx, cy] = [
     Math.round((Camera.x * scale) - RESOLUTION.x / 2),
     Math.round((Camera.y * scale) - RESOLUTION.y / 2),

app/react-components/entities.jsx

@@ -40,7 +40,7 @@ export default function Entities({entities, filters}) {
     const isHighlightedInteraction = id == willInteractWith;
     renderables.push(
       <Entity
-        filters={filters.concat(isHighlightedInteraction ? interactionFilters : [])}
+        filters={isHighlightedInteraction ? interactionFilters : null}
         entity={entities[id]}
         key={id}
       />
@@ -48,6 +48,7 @@ export default function Entities({entities, filters}) {
   }
   return (
     <Container
+      filters={filters}
       sortableChildren
     >
       {renderables}