Duplicate canvas when running in vite dev about react HOT 5 CLOSED

Hey @jamesrweb,
thanks a lot for your answer. I am not using Next.js, but do use strict mode in react due to the default configuration of the vite@latest composition. By removing the strict mode tag I also get rid of the duplicate canvas.

from react.

This worked! Please add that workaround into the readme file to help others solving this common confusion :)

For me, I moved the ReactP5Wrapper outside of StrictMode wrapper like this:

// 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>
    </>
  );
}

from react.

Is your react app using strict mode?
Are you using NextJS?

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.

from react.

Also see #255, #162, etc

from react.

This worked! Please add that workaround into the readme file to help others solving this common confusion :)

For me, I moved the ReactP5Wrapper outside of StrictMode wrapper like this:

// 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?

from react.