Huge performance lag when using react-miniplex ECS

[rkmiller131]

---

UPDATE: THIS WAS A ME PROBLEM - When rendering the changes of objects being added or destroyed, I was creating a complex material from the Lamina library, and wasn't preloading/reusing the material properly.

Hello 👋

I'm new to using the react-miniplex library, and have created a R3F game where a player can pop bubbles in a 3D scene with an avatar. The bubbles and the avatar's hands have colliders on them and, using react-three/cannon, when the two collide, a hookstate method called popBubble removes the bubble that popped from the ECS world. However, upon popping, there is a moment where the entire game freezes before resuming normal functionality. The lag is insane, and makes the game practically unplayable, especially if multiple bubbles are being popped quickly. I've experimented with not removing entities and just adding/removing visibility components from entities instead, and the same lag occurs.

I'd like to know if I'm using the ECS incorrectly, if anyone else experiences lag when using the ECS, or if the lag might be caused by something else.

Here is my popBubble function within the hookstate:

import { hookstate, useHookstate } from '@hookstate/core';
import { GameType } from './types';
import getGameSetup from '../helpers/getGameSetup';
import { ECS } from '../World';

const initialState: GameType = hookstate({
  levels: [],
  score: {
    totalBubbles: 0,
    popped: 0,
    poppedVelocities: [],
  },
  gameOver: false,
});

export const useGameState = () => {
  const gameState = useHookstate(initialState);

  return {
    ...gameState,
    startGame: () => {
      ECS.world.clear();
      getGameSetup().then((results) => gameState.set(results));
    },
    popBubble: (velocity: number) => {
      // Attempting to remove the current bubble from the ECS:
      // Doing so creates TERRIBLE lag - better to just not remove?
      const bubbleId = gameState.levels[0].bubbleEntities[0].get({ noproxy: true });
      const bubbleEntity = ECS.world.entity(bubbleId as EntityId);
      if (bubbleEntity) ECS.world.remove(bubbleEntity);

      gameState.score.popped.set((prev) => prev + 1);
      gameState.score.poppedVelocities.merge([velocity]);
    },
    toggleEndGame: () => {
      ECS.world.clear();
      gameState.gameOver.set((prev) => !prev);
    },
  };
};