Duplicate canvas when running in vite dev

[Mo0812]

Expected Behavior

As many ReactP5Wrapper instances as integrated

Actual Behavior

For each ReactP5Wrapper instance is two canvas are shown

Steps to Reproduce the Problem

1. npm create vite@latest
2. npm install @p5-wrapper/react
3. App.js:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.scss'
import { ReactP5Wrapper } from '@p5-wrapper/react'

function App() {
  const [count, setCount] = useState(0)

  function sketch(p5) {
    p5.setup = () => p5.createCanvas(600, 400);
  
    p5.draw = () => {
        if (p5.mouseIsPressed) {
            p5.fill(0);
          } else {
            p5.fill(255);
          }
          p5.ellipse(p5.mouseX, p5.mouseY, 80, 80);
    };
  }
  

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" rel="noreferrer">
          <img
            src={reactLogo}
            className="logo react"
            alt="React logo"
          />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
        </button>
        <p>
                    Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
                Click on the Vite and React logos to learn more
      </p>
      <ReactP5Wrapper sketch={sketch} />
    </>
  )
}

export default App

Specifications

Package Version: 4.2.0

[jamesrweb]

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.

[jamesrweb]

Also see #255, #162, etc

[Mo0812]

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.

[jordiyapz]

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

[jamesrweb]

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?