update with useCallback

custom/fitness-demo/components/Call/PeopleAside.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Aside } from '@custom/shared/components/Aside';
 import Button from '@custom/shared/components/Button';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
@@ -97,26 +97,32 @@ export const PeopleAside = () => {
   const { showAside, setShowAside } = useUIState();
   const { participants, isOwner } = useParticipants();
 
+  const muteAll = useCallback(
+    (deviceType) => {
+      let updatedParticipantList = {};
+      // Accommodate muting mics and cameras
+      const newSetting =
+        deviceType === 'video' ? { setVideo: false } : { setAudio: false };
+      for (let id in callObject.participants()) {
+        // Do not update the local participant's device (aka the instructor)
+        if (id === 'local') continue;
+
+        updatedParticipantList[id] = newSetting;
+      }
+
+      // Update all participants at once
+      callObject.updateParticipants(updatedParticipantList);
+    },
+    [callObject]
+  );
+
+  const handleMuteAllAudio = () => muteAll('audio');
+  const handleMuteAllVideo = () => muteAll('video');
+
   if (!showAside || showAside !== PEOPLE_ASIDE) {
     return null;
   }
 
-  async function muteAll(deviceType) {
-    let updatedParticipantList = {};
-    // Accommodate muting mics and cameras
-    const newSetting =
-      deviceType === 'video' ? { setVideo: false } : { setAudio: false };
-    for (let id in callObject.participants()) {
-      // Do not update the local participant's device (aka the instructor)
-      if (id === 'local') continue;
-
-      updatedParticipantList[id] = newSetting;
-    }
-
-    // Update all participants at once
-    callObject.updateParticipants(updatedParticipantList);
-  }
-
   return (
     <Aside onClose={() => setShowAside(false)}>
       <AsideHeader />
@@ -127,7 +133,7 @@ export const PeopleAside = () => {
               fullWidth
               size="tiny"
               variant="outline-gray"
-              onClick={() => muteAll('audio')}
+              onClick={handleMuteAllAudio}
             >
               Mute all mics
             </Button>
@@ -135,7 +141,7 @@ export const PeopleAside = () => {
               fullWidth
               size="tiny"
               variant="outline-gray"
-              onClick={() => muteAll('video')}
+              onClick={handleMuteAllVideo}
             >
               Mute all cams
             </Button>