Multiple Instances opened when component is loaded #9

Activity

1. AnaGetovska commented on Mar 25, 2023

   

   AnaGetovska

   on Mar 25, 2023

   More actions

   I have the same issue. When I refresh the page I get the same problem.
2. t-ega commented on Mar 27, 2023

   

   t-ega

   on Mar 27, 2023

   More actions

   i have the same issue too!!. At first i thought it was a bug from my end.
3. myromr commented on Mar 28, 2023

   

   myromr

   on Mar 28, 2023

   Last edited by myromr

   More actions

   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!

   👍React with 👍10Reacted by Kaloyan Kosev, mochfathurrozi, AnaGetovska, TuanLe95, Harshit Mehrotra, bradmkjr, Seyed Sina Pezeshk, Kevin Parra, Mudassar H. and Marcus Paulo Oliveira

   🚀React with 🚀2Reacted by Kevin Parra and Mudassar H.
4. dovh-me commented on Feb 25, 2024

   

   dovh-me

   on Feb 25, 2024

   Last edited by dovh-me

   More actions

   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} />;
   };

   🎉React with 🎉2Reacted by Ángel Herrador and Mudassar H.