fix: race condition

[itsUndefined]

Fix race condition when render/clear is called in rapid succession. This issue was first spotted when trying to use this library in react:
Relevant issue : briosheje/react-html5-qrcode-reader#2

Closes:
#668
#641
#500

[mebjas]

Shouldn't you reset this state when clear() is done? Like in line 342?

[itsUndefined]

I tried that but it doesn't fix the issue. Let me explain why:

In react 18 development mode, useEffect runs twice to make sure that the component is resilient to unmounting and remounting.

This means that in react this library receives these calls in rapid succession:

render() // First render
clear() // Clear is called and finishes before the first render is complete
render() // Second render

Because the clear function is called and is done executing before the first render is completed, there will be two rendered QR code scanners by the end of these calls. We need to pretty much cancel the first render completely when clear is called. That means that the isClearing variable should be reset to false only if another render is called.

I think a better naming for the variable is: isCleared. I renamed it.

[mebjas]

Thanks for the PR, added a comment.

[kaushalyap]

@mebjas can we please get this merged, this issue is really annoying.

Related: briosheje/react-html5-qrcode-reader#2

[dsd-dbeaulieu]

@mebjas this is still an issue, can we get this merged....?

[tuukka-miettinen]

@mebjas, this issue is still open and seems like the issues you raised have been dealt with.

[nl-juntos-timon]

I cannot test if it works, but code-wise it looks ok.