-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Duplicate canvas when running in vite dev #272
Comments
Is your react app using strict mode? P5 binds to the element reference of the containing element, should that element ever change or the reference differ, a new canvas will be rendered. Reacts strict mode does this as part of its "double render test" strategy. NextJS causes this since the element would be rendered once on the server and once on the client (in such a case you should be using the @P5-wrapper/next implementation instead to work around that specific use case. |
Hey @jamesrweb, |
This worked! Please add that workaround into the readme file to help others solving this common confusion :) For me, I moved the // main.tsx
// ...
// Remove the `StrictMode` wrapper, leaving the `App` unwrapped.
ReactDOM.createRoot(document.getElementById("root")!).render(<App />); // App.tsx
// ...
function App() {
return (
<>
{/* The p5wrapper component is free from `StrictMode` */}
<ReactP5Wrapper sketch={sketch} />
<React.StrictMode>
{/* While this area has strict mode enabled */}
<p>Hello, strict mode!</p>
</React.StrictMode>
</>
);
} |
@jordiyapz would you be willing to submit a PR? |
Expected Behavior
As many ReactP5Wrapper instances as integrated
Actual Behavior
For each ReactP5Wrapper instance is two canvas are shown
Steps to Reproduce the Problem
Specifications
Package Version: 4.2.0
The text was updated successfully, but these errors were encountered: