Redrawing BitmapText every frame causes memory leak - Pixijs v5&v6

[JoeMGomes]

Hi, I'm using PIXI.js v5.3.12 for a project and the project structures requires a call to "new BitmapText('some text', {fontName: 'my_font_name'})" every frame. Unfortunately this causes a memory leak because an 'on update' event listener is created every frame and is not GC'ed. 
Here is the stack trace of where I believe the allocation that is not freed occurs:

EE (pixi.js:1029)
addListener (pixi.js:1050)
on (pixi.js:1217)
Texture (pixi.js:15131)
BitmapText.updateText (pixi.js:36495)
BitmapText.validate (pixi.js:36637)
BitmapText.updateTransform (pixi.js:36618)
Container.updateTransform (pixi.js:8168)
Container.updateTransform (pixi.js:8168)
Renderer.render (pixi.js:22057)

Here is a compact example that reproduces the memory leak and mirrors what I am trying to do.

let container;
let loader = PIXI.Loader.shared;
loader.add("_30_font.fnt")

loader.load(() =>{

  container = new PIXI.Container();
  
  app.ticker.add(function(delta) {
    container.removeChildren();
    let bitmapText = new PIXI.BitmapText(new Date().toString(), { fontName: "_30_font"});
    bitmapText.x = 11
    bitmapText.y = 20
    container.addChild (bitmapText)
  });
    
  app.stage.addChild(container);
})

And a screenshot of a sequence of snapshots of the memory heap.

 

I know instantiating a BitmapText every frame isn't probably the way to go but I also don't think it should cause a memory leak like this. Is it intended behaviour or just a bug?

 

EDIT: The leak persists when upgrading to PIXI v6

Edited December 14, 2022 by JoeMGomes
Additional information

[ivan.popelyshev]

did you try to destroy() old one?

[JoeMGomes]

I ended up pooling the Bitmaptext objects and resetting them each frame (for anyone trying to do this, don't forget to reset the .mask property as well, gave me a hard time ).

This is actually a good enough fix that is not too hard to apply if you have easy access to the bitmaptext objects (which wasn't necessarily my case unfortunately) 

17 hours ago, ivan.popelyshev said:

did you try to destroy() old one?

 

I'll leave a fix for my initial example here for anyone struggling.

let container;
loader.add("_30_font.fnt")

loader.load(() =>{
  container = new PIXI.Container();  
  app.ticker.add(function(delta) {
	//FIX HERE
    let removed = container.removeChildren();
    removed.forEach(element => {
      element.destroy();
    });
	//END FIX
    let bitmapText = new PIXI.BitmapText(new Date().toString(), { fontName: "_30_font"});
    bitmapText.x = 11
    bitmapText.y = 20
    container.addChild (bitmapText)
  });
    
  app.stage.addChild(container);
})

Thanks anyways @ivan.popelyshev !!!