Memoized Haircheck.js waiting message

custom/shared/components/HairCheck/HairCheck.js

@@ -32,8 +32,13 @@ import { useDeepCompareMemo } from 'use-deep-compare';
 export const HairCheck = () => {
   const { callObject, join } = useCallState();
   const { localParticipant } = useParticipants();
-  const { deviceState, camError, micError, isCamMuted, isMicMuted } =
+  const {
-    useMediaDevices();
+    deviceState,
+    camError,
+    micError,
+    isCamMuted,
+    isMicMuted,
+  } = useMediaDevices();
   const { openModal } = useUIState();
   const [waiting, setWaiting] = useState(false);
   const [joining, setJoining] = useState(false);
@@ -95,10 +100,9 @@ export const HairCheck = () => {
     [localParticipant]
   );
 
-  const isLoading = useMemo(
+  const isLoading = useMemo(() => deviceState === DEVICE_STATE_LOADING, [
-    () => deviceState === DEVICE_STATE_LOADING,
+    deviceState,
-    [deviceState]
+  ]);
-  );
 
   const hasError = useMemo(() => {
     if (
@@ -127,6 +131,39 @@ export const HairCheck = () => {
     }
   }, [camError]);
 
+  const showWaitingMessage = useMemo(() => {
+    return (
+      <div className="waiting">
+        <Loader />
+        {denied ? (
+          <span>Call owner denied request</span>
+        ) : (
+          <span>Waiting for host to grant access</span>
+        )}
+      </div>
+    );
+  }, [denied]);
+
+  const showUsernameInput = useMemo(() => {
+    return (
+      <>
+        <TextInput
+          placeholder="Enter display name"
+          variant="dark"
+          disabled={joining}
+          value={userName}
+          onChange={(e) => setUserName(e.target.value)}
+        />
+        <Button
+          disabled={joining || userName.length < 3}
+          onClick={() => joinCall(userName)}
+        >
+          Join call
+        </Button>
+      </>
+    );
+  }, [userName, joinCall, joining, setUserName]);
+
   return (
     <>
       <main className="haircheck">
@@ -174,34 +211,7 @@ export const HairCheck = () => {
             </div>
             {tileMemo}
           </div>
-          <footer>
+          <footer>{waiting ? showWaitingMessage : showUsernameInput}</footer>
-            {waiting ? (
-              <div className="waiting">
-                <Loader />
-                {denied ? (
-                  <span>Call owner denied request</span>
-                ) : (
-                  <span>Waiting for host to grant access</span>
-                )}
-              </div>
-            ) : (
-              <>
-                <TextInput
-                  placeholder="Enter display name"
-                  variant="dark"
-                  disabled={joining}
-                  value={userName}
-                  onChange={(e) => setUserName(e.target.value)}
-                />
-                <Button
-                  disabled={joining || userName.length < 3}
-                  onClick={() => joinCall(userName)}
-                >
-                  Join call
-                </Button>
-              </>
-            )}
-          </footer>
         </div>
 
         <style jsx>{`