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,11 +97,8 @@ export const PeopleAside = () => {
   const { showAside, setShowAside } = useUIState();
   const { participants, isOwner } = useParticipants();
 
-  if (!showAside || showAside !== PEOPLE_ASIDE) {
-    return null;
-  }
-
-  async function muteAll(deviceType) {
+  const muteAll = useCallback(
+    (deviceType) => {
       let updatedParticipantList = {};
       // Accommodate muting mics and cameras
       const newSetting =
@@ -115,6 +112,15 @@ export const PeopleAside = () => {
 
       // Update all participants at once
       callObject.updateParticipants(updatedParticipantList);
+    },
+    [callObject]
+  );
+
+  const handleMuteAllAudio = () => muteAll('audio');
+  const handleMuteAllVideo = () => muteAll('video');
+
+  if (!showAside || showAside !== PEOPLE_ASIDE) {
+    return null;
   }
 
   return (
@@ -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>