React's strict mode causes the canvas to be created twice about react HOT 4 CLOSED

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 😁.

from react.

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.

from react.

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

from react.

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.

from react.