use useCallback

src/room/MuteStates.ts

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
 import { IWidgetApiRequest } from "matrix-widget-api";
 
 import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
@@ -83,13 +89,8 @@ export function useMuteStates(): MuteStates {
     });
   }, [audio, video]);
 
-  useEffect(() => {
+  const onMuteStateChangeRequest = useCallback(
-    // We setup a event listener for the widget action ElementWidgetActions.DeviceMute.
+    (ev: CustomEvent<IWidgetApiRequest>) => {
-    if (widget) {
-      // only setup the listener in widget mode
-      const onMuteStateChangeRequest = (
-        ev: CustomEvent<IWidgetApiRequest>,
-      ): void => {
       // First copy the current state into our new state.
       const newState = {
         audio_enabled: audio.enabled,
@@ -115,9 +116,14 @@ export function useMuteStates(): MuteStates {
       // This allows to also use this action to just get the unaltered current state
       // by using a fromWidget request with: `ev.detail.data = {}`
       widget!.api.transport.reply(ev.detail, newState);
-      };
+    },
+    [audio, video],
+  );
+  useEffect(() => {
+    // We setup a event listener for the widget action ElementWidgetActions.DeviceMute.
+    if (widget) {
+      // only setup the listener in widget mode
 
-      // Connect our mute listener.
       widget.lazyActions.on(
         ElementWidgetActions.DeviceMute,
         onMuteStateChangeRequest,
@@ -131,7 +137,7 @@ export function useMuteStates(): MuteStates {
         );
       };
     }
-  }, [audio, video]);
+  }, [onMuteStateChangeRequest]);
 
   return useMemo(() => ({ audio, video }), [audio, video]);
 }