Bug: v8 memoized component renders after being unmounted

[zstiggz]

Current Behavior

If I create a memoized component which renders a pixi element, that component will continue to render even after it is unmounted. I believe this only happens when using proxy state, but don't quote me on that. Code sandbox link in the repro steps below.

Expected Behavior

An unmounted component does not render anymore.

Steps to Reproduce

https://codesandbox.io/p/sandbox/holy-dust-4tyfdv

If you click the "change color" button, you'll see the graphics element change color as expected. The strange part is when you click "unmount" to unmount the entire pixi application, then click the change color button with the console open, you will see it log "render square".

Environment

• @pixi/react version: 8.0.0-beta.7
• pixi.js version: 8.3.1
• React version: 18.2.0
• ReactDOM version: 18.2.0
• Running Example: https://codesandbox.io/p/sandbox/holy-dust-4tyfdv

Possible Solution

https://valtio.pmnd.rs/docs/how-tos/some-gotchas

Additional Information

This uses the valtio library for proxy state. It does not appear to be a problem with the library, as if I remove pixi and render simple html, the problem does not persist.

https://valtio.pmnd.rs/docs/introduction/getting-started

[zstiggz]

@trezy @lunarraid @thejustinwalsh I see there's a PR for this issue #542 - curious what's the hold up. Anything I can do to help? Possible to get some pretty nasty memory leaks (especially in safari), since the application is not destroyed on unmount. Anticipating this PR will fix that.

[itsezc]

I have a very similar issue here, and can confirm its with Memoization (also using Valtio)!

[trezy]

Fixed in @pixi/[email protected].