Refactor to fix permissionChecker timeout reference being reassigned in async function

77:9  error    Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead

Author: MajorLift

ui/components/app/qr-hardware-popover/base-reader.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import log from 'loglevel';
 import { URDecoder } from '@ngraveio/bc-ur';
 import PropTypes from 'prop-types';
@@ -30,7 +30,7 @@ const BaseReader = ({
   const [urDecoder, setURDecoder] = useState(new URDecoder());
   const [progress, setProgress] = useState(0);
 
-  let permissionChecker = null;
+  const permissionCheckerRef = useRef(null);
   const mounted = useRef(false);
 
   const reset = () => {
@@ -40,29 +40,7 @@ const BaseReader = ({
     setProgress(0);
   };
 
-  const checkEnvironment = async () => {
-    try {
-      const { environmentReady } = await WebcamUtils.checkStatus();
-      if (
-        !environmentReady &&
-        getEnvironmentType() !== ENVIRONMENT_TYPE_FULLSCREEN
-      ) {
-        const currentUrl = new URL(window.location.href);
-        const currentHash = currentUrl.hash;
-        const currentRoute = currentHash ? currentHash.substring(1) : null;
-        global.platform.openExtensionInBrowser(currentRoute);
-      }
-    } catch (e) {
-      if (mounted.current) {
-        setError(e);
-      }
-    }
-    // initial attempt is required to trigger permission prompt
-    // eslint-disable-next-line no-use-before-define
-    return initCamera();
-  };
-
-  const checkPermissions = async () => {
+  const checkPermissions = useCallback(async () => {
     try {
       const { permissions } = await WebcamUtils.checkStatus();
       if (permissions) {
@@ -74,15 +52,52 @@ const BaseReader = ({
         setReady(READY_STATE.READY);
       } else if (mounted.current) {
         // Keep checking for permissions
-        permissionChecker = setTimeout(checkPermissions, SECOND);
+        permissionCheckerRef.current = setTimeout(checkPermissions, SECOND);
         setReady(READY_STATE.NEED_TO_ALLOW_ACCESS);
       }
     } catch (e) {
       if (mounted.current) {
         setError(e);
       }
     }
-  };
+  }, []);
+
+  const initCamera = useCallback(() => {
+    try {
+      checkPermissions();
+    } catch (e) {
+      if (!mounted.current) {
+        return;
+      }
+      if (e.name === 'NotAllowedError') {
+        log.info(`Permission denied: '${e}'`);
+        setReady(READY_STATE.NEED_TO_ALLOW_ACCESS);
+      } else {
+        setError(e);
+      }
+    }
+  }, [checkPermissions]);
+
+  const checkEnvironment = useCallback(async () => {
+    try {
+      const { environmentReady } = await WebcamUtils.checkStatus();
+      if (
+        !environmentReady &&
+        getEnvironmentType() !== ENVIRONMENT_TYPE_FULLSCREEN
+      ) {
+        const currentUrl = new URL(window.location.href);
+        const currentHash = currentUrl.hash;
+        const currentRoute = currentHash ? currentHash.substring(1) : null;
+        global.platform.openExtensionInBrowser(currentRoute);
+      }
+    } catch (e) {
+      if (mounted.current) {
+        setError(e);
+      }
+    }
+    // initial attempt is required to trigger permission prompt
+    return initCamera();
+  }, [initCamera]);
 
   const handleScan = (data) => {
     try {
@@ -105,30 +120,14 @@ const BaseReader = ({
     }
   };
 
-  const initCamera = () => {
-    try {
-      checkPermissions();
-    } catch (e) {
-      if (!mounted.current) {
-        return;
-      }
-      if (e.name === 'NotAllowedError') {
-        log.info(`Permission denied: '${e}'`);
-        setReady(READY_STATE.NEED_TO_ALLOW_ACCESS);
-      } else {
-        setError(e);
-      }
-    }
-  };
-
   useEffect(() => {
     mounted.current = true;
     checkEnvironment();
     return () => {
       mounted.current = false;
-      clearTimeout(permissionChecker);
+      clearTimeout(permissionCheckerRef.current);
+      permissionCheckerRef.current = null;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -137,11 +136,10 @@ const BaseReader = ({
     } else if (ready === READY_STATE.NEED_TO_ALLOW_ACCESS) {
       checkPermissions();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ready]);
+  }, [ready, checkPermissions, initCamera]);
 
   const tryAgain = () => {
-    clearTimeout(permissionChecker);
+    clearTimeout(permissionCheckerRef.current);
     reset();
     checkEnvironment();
   };