react-p5

react-p5 copied to clipboard

I've noticed that when I use the strict mode HOC I get two canvases rendering on the page. Perhaps I missed it in the docs but I didn't see this as a restriction. You can see the issue here https://github.com/Jonny-B/portfolio/blob/master/src/apps/galaxy-sim/src/index.js or it can also be replicated by implementing a new create-react-app app and following this tutorial linked in the your docs. https://levelup.gitconnected.com/integrating-p5-sketches-into-your-react-app-de44a8c74e91

Also, it seems the animation appear to play at double speed.

NOTE: The pictures below are actually from the demo code converted from a class component to a functional component and not from the tutorial. However, they both functioned the same way for me.

I couldn't figure out how to solve it, I used

#defaultCanvas1 {
  display: none;
}

I don't think is a good solution but it allowed me to continue working

Did some digging on this myself because I was having the same issue, I came across this: https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode React.StrictMode causes 2 renders. The first of which is a sort of app precheck(warnings/errors) for problematic code. The second is the real app rendering. This only occurs in the dev environment, because react does not know how to clean up the first render.

I made a build of my project and it really does only 1 render in prod.

So with webpack and the rest of the tool-chain, @eduairet recommendation should work for dev and should also be automatically cleaned up for prod build.

So this isn't a true fix but a better outcome and understanding.

@StevenMJMarshall this is wonderful, thanks for the explanation!