Multiple Instances opened when component is loaded

[KimeraMoses]

This happens randomly and I can't figure out what's causing it.

[AnaGetovska]

I have the same issue. When I refresh the page I get the same problem.

[t-ega]

i have the same issue too!!. At first i thought it was a bug from my end.

[myromr]

In React, there is a thing called StrictMode. React StrictMode renders components twice in the development environment but not in production. This is to detect any problems with your code. useEffect itself will only be called once. StrictMode is automatically enabled in development mode, but you can disable it by removing the <React.StrictMode> wrapper from your index.js or App.js file or by commenting it out.

Source: https://youtu.be/k1Zyj4Qw56M

I hope this helps!

[dovh-me]

I was able to overcome this issue from happening without disabling react strict mode by using the useRef hook.

Replace your HTML5QrcodePlugin component with the below code

const Html5QrcodePlugin = (props: any) => {
  const regionRef = useRef(null);
  const scannerRef = useRef<Html5QrcodeScanner | null>(null);

  useEffect(() => {
    if (!scannerRef.current) {
      // when component mounts
      const config = createConfig(props);
      const verbose = props.verbose === true;
      // Suceess callback is required.
      if (!props.qrCodeSuccessCallback) {
        throw 'qrCodeSuccessCallback is required callback.';
      }
      const html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
      scannerRef.current = html5QrcodeScanner;
    }

    const scanner = scannerRef.current;
    scanner.render(props.qrCodeSuccessCallback, props.qrCodeErrorCallback);

    // cleanup function when component will unmount
    return () => {
      scanner.clear().catch((error) => {
        console.error('Failed to clear html5QrcodeScanner. ', error);
      });
    };
  }, []);

  return <div ref={regionRef} id={qrcodeRegionId} />;
};