Performant approach/best practice for rendering dynamically changing amount of elements.

[LoserAntbear]

Greetings, fellow friends.
Trying to apply skia for game development here. I'm trying to marry skia and ECS currently. Sadly, pretty fast I've encountered an issue: when you try to process and render dynamically changing array of entities the app stutters, rendering the data from previous frame, rather than updated one.

Code structure:
ECS registry is an instance, which keeps entities and components.
Gameloop executes on every useFrameCallback, where systems are processing serialized arrays of entities.

Since ECS registry is a global namespace constant I need to inject ECS registry into React ecosystem. To achieve this I've created ECSContext, which holds an array of currently existing entities and their components.
Thus entities for serialization are fetched from this ECSContext.

When I push an entity into an array the context updates it's value, triggering the react lifecycle updates. That's pretty straightforward and simple, I presume.

Alas, when I try to render the given items the app "stutters" on every entities array change (e.g. when the entity is being pushed, popped from the array). I reckon that this happens because the Canvas has to re-process it's tree on every update and this is a heavy operation, which leads to a de-sync between UI and RN threads.

Minimal boilerplate code example for the case:

• ECS Registry:

// ECS Registry

import { createRegistry, Entity } from '@youniverse-center/ecsjs';
import { Components } from '@engine/types/engine/ecs/components';

export const ECS: ECS<EntitiesIds> = createRegistry<Components>();

• ECS Context:

// ECS Context

export type ECSState = {
  entities: Entity<Components>[];
  sync: () => void;
};

const INITIAL_STATE: ECSState = {
  entities: [],
  sync: noop,
};

export const ECSContext: ExtendedContext<ECSState> = createContext<ECSState>(INITIAL_STATE);

type Props = PropsWithChildren;

export function ECSContextProvider(props: Props) {
  const [value, setValue] = useState(INITIAL_STATE);

  const sync = useCallback(() => {
    setValue(() => {
      const entities = ECS.all();

      return {
        sync,
        entities,
      }
    });
  }, []);

  useEffect(() => {
    sync();

    ECS.onEntityCreated(sync);
    ECS.onEntityRemoved(sync)

    return () => {
      ECS.offEntityCreated(sync);
      ECS.offEntityRemoved(sync);
    };
  }, []);

  return (
    <ECSContext.Provider value={value}>
      {props.children}
    </ECSContext.Provider>
  );
}

• App:

// App

function Providers(props: Props) {
  return (
    <ECSContextProvider>
        {props.children}
    </ECSContextProvider>
  );
}

export function App() {
  ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);

  return (
    <Providers>
      <GameLoop />
    </Providers>
  );
}

• GameLoop:

// GameLoop

export const GameLoop = memo((props: Props) => {
  const worldState = useWorldStateContext().sharedState;
  const entities = useECSContext().entities;
  const serializedEntities = GAME_LOOP.serializer.serializeEntities(entities);

  useFrameCallback((frameInfo) => {
    if (!worldState) {
      return;
    }

    const frameTime = frameInfo.timeSincePreviousFrame || frameInfo.timeSinceFirstFrame;
    const deltaTime = frameTime ? frameTime / 1000 : 0.0167;

    gameLoopWorklet(deltaTime, serializedEntities, worldState);
  });

  return <MainScene />;
});

• MainScene:

// MainScene
function renderEntity({
  sprite,
  position,
  parallax,
  children,
  transform,
}: RenderData, id: string | number) {
  if (parallax) {
    return (
      <ParallaxRender
        id={id}
        key={id}
        sprite={sprite}
        position={position}
        parallax={parallax}
      />
    );
  } else if (sprite && position) {
    return (
      <SpriteRender
        id={id}
        key={id}
        sprite={sprite}
        position={position}
        transform={transform}
      />
    );
  }

  return null;
}

export function MainScene(props: Props) {
  const { entities } = useContext(ECSContext);
  
  return (
    <Screen style={styles.container}>
       <Canvas style={styles.canvas} >
           {entities.map(renderEntity)}
       </Canvas>
    </Screen>
  );
};

I understand that this is pretty verbose, but I don't want to miss a thing.

I'm adding a new entity into the entities array every 300ms, which are hidden behind the screen (to avoid screen space pollution). This produces given stutters.

Could you, probably point out the possible caveats and issues I'm not noticing? Since I've tried a lot of thing - from immutable states, to controlled render calls - it still produces stutters. Like on the video attached.

skia_stutters.mp4