diff --git a/src/extension/options-page/DashboardDialogs/DialogBase.tsx b/src/extension/options-page/DashboardDialogs/DialogBase.tsx index 2b9d07032fe9..ed8899df9391 100644 --- 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 && } + {children || null} + + ) + }, + () => !routeMatching, + ) + return ( - {Component && } - {children || null} + ) diff --git a/src/utils/hooks/useQRCodeScan.tsx b/src/utils/hooks/useQRCodeScan.tsx index ccf5fd2575f4..e82942d25aeb 100644 --- a/src/utils/hooks/useQRCodeScan.tsx +++ b/src/utils/hooks/useQRCodeScan.tsx @@ -17,6 +17,12 @@ export function useQRCodeScan( const [mediaStream, setMediaStream] = useState(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()