diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js
--- a/native/qr-code/qr-code-screen.react.js
+++ b/native/qr-code/qr-code-screen.react.js
@@ -42,7 +42,6 @@
 
 // eslint-disable-next-line no-unused-vars
 function QRCodeScreen(props: QRCodeScreenProps): React.Node {
-  const [qrCodeValue, setQRCodeValue] = React.useState<?string>();
   const [qrData, setQRData] =
     React.useState<?{ +deviceID: string, +aesKey: string }>();
   const { setUnauthorizedDeviceID } = useTunnelbroker();
@@ -83,9 +82,7 @@
 
       const ed25519Key: string = await getContentSigningKey();
 
-      const url = qrCodeLinkURL(aesKeyAsHexString, ed25519Key);
       setUnauthorizedDeviceID(ed25519Key);
-      setQRCodeValue(url);
       setQRData({ deviceID: ed25519Key, aesKey: aesKeyAsHexString });
     } catch (err) {
       console.error('Failed to generate QR Code:', err);
@@ -96,6 +93,11 @@
     void generateQRCode();
   }, [generateQRCode]);
 
+  const qrCodeURL = React.useMemo(
+    () => (qrData ? qrCodeLinkURL(qrData.aesKey, qrData.deviceID) : undefined),
+    [qrData],
+  );
+
   const styles = useStyles(unboundStyles);
   return (
     <>
@@ -112,7 +114,7 @@
         <Text style={styles.headingSubtext}>
           Open the Comm app on your phone and scan the QR code below
         </Text>
-        <QRCode value={qrCodeValue} size={200} />
+        <QRCode value={qrCodeURL} size={200} />
         <View style={styles.instructionsBox}>
           <Text style={styles.instructionsTitle}>How to find the scanner:</Text>
           <Text style={styles.instructionsStep}>
diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -68,8 +68,6 @@
 }
 
 function QRCodeLogin(): React.Node {
-  const [qrCodeValue, setQRCodeValue] = React.useState<?string>();
-
   const [deviceKeys, setDeviceKeys] =
     React.useState<?{ +deviceID: string, +aesKey: string }>();
   const { setUnauthorizedDeviceID } = useTunnelbroker();
@@ -114,9 +112,7 @@
       const rawAESKey: Uint8Array = await generateKeyCommon(crypto);
       const aesKeyAsHexString: string = uintArrayToHexString(rawAESKey);
 
-      const url = qrCodeLinkURL(aesKeyAsHexString, ed25519);
       setUnauthorizedDeviceID(ed25519);
-      setQRCodeValue(url);
       setDeviceKeys({ deviceID: ed25519, aesKey: aesKeyAsHexString });
     } catch (err) {
       console.error('Failed to generate QR Code:', err);
@@ -127,6 +123,14 @@
     void generateQRCode();
   }, [generateQRCode]);
 
+  const qrCodeURL = React.useMemo(
+    () =>
+      deviceKeys
+        ? qrCodeLinkURL(deviceKeys.aesKey, deviceKeys.deviceID)
+        : undefined,
+    [deviceKeys],
+  );
+
   return (
     <>
       <QRAuthHandler
@@ -141,7 +145,7 @@
         <div className={css.scanInstructions}>
           Open the Comm app on your phone and scan the QR code below
         </div>
-        <QRCodeSVG value={qrCodeValue} size={300} marginSize={4} level="L" />
+        <QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
         <div className={css.instructionsContainer}>
           <div className={css.instructionsTitle}>How to find the scanner:</div>
           <div className={css.instructionsStep}>