fix: ensure QR component not re-render

DimensionDev · Dec 26, 2019 · baad1da · baad1da
1 parent 308aed3
commit baad1da
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/extension/options-page/DashboardDialogs/DialogBase.tsx b/src/extension/options-page/DashboardDialogs/DialogBase.tsx
@@ -126,6 +126,18 @@ export function DialogRouter(props: DialogRouterProps) {
                   history.push(onExit || '..')
               }
 
+    const ChildrenComponent = React.memo(
+        function ChildrenComponent() {
+            return (
+                <>
+                    {Component && <Component />}
+                    {children || null}
+                </>
+            )
+        },
+        () => !routeMatching,
+    )
+
     return (
         <Dialog
             disableEscapeKeyDown
@@ -136,8 +148,7 @@ export function DialogRouter(props: DialogRouterProps) {
             classes={{ paper: classes.dialog }}
             TransitionComponent={Transition}>
             <Route path={matchPattern?.path}>
-                {Component && <Component></Component>}
-                {children || null}
+                <ChildrenComponent />
             </Route>
         </Dialog>
     )

diff --git a/src/utils/hooks/useQRCodeScan.tsx b/src/utils/hooks/useQRCodeScan.tsx
@@ -17,6 +17,12 @@ export function useQRCodeScan(
         const [mediaStream, setMediaStream] = useState<MediaStream | null>(null)
 
         useEffect(() => {
+            function stop() {
+                if (mediaStream) {
+                    mediaStream.getTracks().forEach(x => x.stop())
+                }
+                video.current!.pause()
+            }
             async function start() {
                 if (permission !== 'granted' || !video.current) return
                 try {
@@ -27,24 +33,15 @@ export function useQRCodeScan(
                             audio: false,
                             video: device === null ? { facingMode: 'environment' } : { deviceId: device },
                         })
-                        setMediaStream(media)
+                        return setMediaStream(media)
                     }
                     video.current.srcObject = media
                     video.current.play()
                 } catch (e) {
                     console.error(e)
-                    setMediaStream(null)
-                    video.current.srcObject = null
-                    video.current.pause()
+                    stop()
                 }
             }
-            function stop() {
-                if (mediaStream) {
-                    mediaStream.getTracks().forEach(x => x.stop())
-                    setMediaStream(null)
-                }
-                video.current!.pause()
-            }
             if (!video.current) return
             if (!isScanning) return stop()