Version 0.1.3

[jamesrweb]

What's Changed

• Update dependency @vitejs/plugin-react to v4 by @renovate in Update dependency @vitejs/plugin-react to v4 #11
• Update JS-DevTools/npm-publish action to v2 by @renovate in Update JS-DevTools/npm-publish action to v2 #10
• Update react-p5-wrapper package name to @p5-wrapper/react in the docs by @jamesrweb d5f7a9d

Full Changelog: v0.1.2...v0.1.3

---

This discussion was created from the release Version 0.1.3.

[karlgarske]

I get a flicker when a variable inside of my draw function experiences a state change. From what I can tell, this is because setup is being called and the canvas is then re-created. Is there a way to have setup only run once?

Here's the simplest example I could come up with:

  const [test, setTest] = useState(0);
  setTimeout(()=> setTest(test+1), 1000);

  const sketch: Sketch = (p5) => {
    p5.setup = () => {
      p5.createCanvas(400, 400, p5.WEBGL);
      console.log('setup');
    }

    p5.draw = () => {
      p5.background(250);
      p5.square(0, 0, 50);
    };
  };

  return (
    <div>
      <NextReactP5Wrapper sketch={sketch} />
    </div>
  );

[jamesrweb]

Firstly the sketch function should not be defined in the component body, if the component re-renders, the sketch reference will change and cause a full refresh of the canvas even if no state change occurred.

Secondly you should be passing state down into the update function via the component props as shown in the P5-wrapper/react docs and not relying on state to come from outside the sketch function body.

Hope this helps ❤️

[karlgarske]

Wonderful -- that was it. I didn't know about the update function in particular because I didn't know the docs were relevant to this build. Much appreciated!