Sometimes camera feed get rendered twice in Nextjs reactStrictMode

[kaushalyap]

First of all thanks for library and making it React 18 compatible, it is hard to find a maintained QR reader library these days. But I am experiencing a bug with your library, which is described below.

At first I was using https://github.com/scanapp-org/html5-qrcode-react which make a wrapper around html5-qrcode library, in that also sometimes camera video feed get rendered twice(one below the other, with two stop scanning buttons), I thought some mis handled case in his code, so I tried your library hoping this case may be handle by your library but even in your library camera feed get rendered twice. This only seem to happen in development mode of Nextjs when reactStrictMode: true,.

I am using following package versions

"next": "^12.3.4",
"react": "18.2.0",
"react-dom": "18.2.0",

[briosheje]

Can you please provide a stackblitz or similar to replicate the issue?

Also, remember that strict mode always performs two re-renders, this is by design in React.

[itsUndefined]

I just opened a PR on the main project to fix this issue

[briosheje]

I just opened a PR on the main project to fix this issue

Ok, so I suppose the original issue is directly relying on html5-qrcode directly, so this library does not need to be updated because it relies on the minified/compiled html5-qrcode library.

[itsUndefined]

Right. It's an issue with html5-qrcode directly. You can follow the PR if you want: mebjas/html5-qrcode#686

[briosheje]

@itsUndefined I will keep the issue opened here until it gets closed in the html5-qrcode repo.

Thanks for investigating :)