Sketch renders twice when using app router

[EliotSlevin]

Expected Behavior

Sketch elements only contains one canvas

Actual Behavior

Sketch contains two? No clue why, but even in the most basic case when using the latest next.js, you get two sketches rendering.

The actual component renders it twice.

I've tried using p5-wrapper directly, with the same outcome.

Steps to Reproduce the Problem

1. Create a new next js app, using app router.
2. Add the snippet as is described.
3. Get two sketches.

I've made a minimal reproduction. Notice how this happens in app router, but not page router.

Archive.zip

Specifications

Package Version: 0.2.0

[jamesrweb]

My assumption here is that you need to turn off strict mode. This is not a library issue but a react one since reacts strict mode is incompatible with p5 instance modes render cycle since reacts strict mode does a hard double render on refs and p5 itself won't hold the references correctly accordingly and this sync issue is the problem.

Fundamentally, this library and the p5-wrapper/react upstream can't solve that, only p5 or react themselves could. That's unlikely and so the simplest solution is to turn off strict mode.

Note: This has been discussed many times in the p5-wrapper/react upstream repo, I recommend any future users refer to historical issues there and in the docs for further information.