ArchCase

Design · Practice · Interview

Loading…

PixiJS: memory leaks and forgotten destroy

PixiJSsenior

A colleague creates a new Pixi-based GameMap component — a map with 1000 unit sprites, rotation animation, resize. It works in tests. But QA: after 10 map switches the tab uses 2 GB of RAM. Walk the diff and find every place resources aren't released.

PR: lesson.tsx +41 −05 проблем

1-// GameMap.tsx — new Pixi-based component

1+import { useEffect, useRef } from 'react'

2+import { Application, Sprite, Texture, Container, Ticker } from 'pixi.js'

4+interface Props {

5+ mapId: string

6+ units: { id: string; x: number; y: number; textureUrl: string }[]

7+}

9+export function GameMap({ mapId, units }: Props) {

10+ const containerRef = useRef<HTMLDivElement>(null)

11+

12+ useEffect(() => {

13+ if (!containerRef.current) return

14+

15+ const app = new Application({ width: 1024, height: 768 })

16+ containerRef.current.appendChild(app.view as HTMLCanvasElement)

17+

18+ const unitContainer = new Container()

19+ app.stage.addChild(unitContainer)

20+

21+ units.forEach((u) => {

22+ const texture = Texture.from(u.textureUrl)

23+ const sprite = new Sprite(texture)

24+ sprite.x = u.x

25+ sprite.y = u.y

26+ unitContainer.addChild(sprite)

27+ })

28+

29+ const tickerFn = (delta: number) => {

30+ unitContainer.children.forEach((sprite) => {

31+ sprite.rotation += 0.01 * delta

32+ })

33+ }

34+ Ticker.shared.add(tickerFn)

35+

36+ window.addEventListener('resize', () => {

37+ app.renderer.resize(window.innerWidth, window.innerHeight)

38+ })

39+ }, [mapId, units])

40+

41+ return <div ref={containerRef} />

42+}

Шаг 1 из 7

Why PixiJS is especially leak-prone

PixiJS runs on WebGL — direct access to the GPU. GPU memory isn't managed by the JavaScript garbage collector. If you didn't call `destroy()`, the memory stays allocated. Critical resources: - **Application** — WebGL context (browser limit ~16 per page). - **Textures** — GPU texture memory, can be tens of MB each. - **Sprites, Containers** — JS objects + WebGL buffers. - **Tickers** — keep-alive for closures. - **Event listeners** — window/document level. In React: **every useEffect without cleanup = guaranteed leak** on re-renders. Look at the code and find everything that isn't cleaned up.