React's strict mode causes the canvas to be created twice

[neongreen]

Related to #162.

I know that I can turn the strict mode off, but I'd rather fix the problem in p5-wrapper itself.

For reference: https://react.dev/reference/react/StrictMode. It causes all render methods to be called twice when dev mode is enabled.

It would seem that p5-wrapper doesn't use React's cleanup functionality properly -- it's supposed to remove the canvas when the component is unmounted.

Note that I can only reproduce this behavior in Chrome. I can provide a repro if this would help.

[jamesrweb]

Interesting...

We added cleanup effect handlers a while ago as you can see in the ReactP5WrapperWithSketch component.

I'm not sure why this is happening with the strict mode implementation. My only idea at the moment is that there's some effect race issue where the cleanup is done before the ref update. If that's the case then that's a React bug actually. I'm not entirely convinced that is the issue though.

Feel free to create a PR if you already have an idea of what it could be or if you want to take on a challenge? I'm always happy with support from the community. If you aren't able to contribute a PR then I'll take a look myself in the next few days 😁.

[neongreen]

I am currently in the process of rewriting my code and honestly I might just be using refs/handles very wrongly. I’ll close this issue unless I have a clear repro.

[neongreen]

Actually no, I gave up on refs entirely and the issue persists. I'll provide a repro.

[neongreen]

Turns out that extensions are to blame.. although it's still unclear why it might be happening. And it can't be reproduced reliably.

When I enable a bunch of extensions at once, and especially if I also open devtools, I get two canvases perhaps 5 out of 10 times. If I enable a few extensions and don't open devtools — 1/10 times. I couldn't isolate a single extension that would be the culprit, though.