How to delete subordinate components correctly?

Question

buildNewStructure(){
   removeAll(children.query());
   sprite = Sprite(Flame.images.fromCache('new_structure.png'));
   add(ListButton0(g,structure!));
   add(ListButton1(g,structure!));
   add(ListButton2(g,structure!));
   add(ListButton3(g,structure!));
   add(LeftButton(g,structure!));
   add(RightButton(g,structure!));}

With this design, old components are not deleted when called frequently. What is the reason for this behavior? How to properly remove old components so that they are definitely removed?

Answer 1

lifecycle.processQueues();

This helped solve the problem, but I'm not sure that this is the right solution, I notice a drop in performance.

Answer 2

They are deleted, but everything is processed before the next tick, not in the same tick. Just like you say you'll notice a performance degradation if you call lifecycle.processQueues manually since it will then be done two times per tick.

Preferably you shouldn't build logic that depends on checking whether components are in the component tree in the same tick. You can check component.isRemoving if you want to see whether the component is going to be removed before the next tick.