Use memoized callbacks when passing to components

src/home/CallTypeDropdown.tsx

@@ -42,6 +42,12 @@ interface Props {
 export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
   const { t } = useTranslation();
 
+  const onAction = (key: React.Key) => {
+    setCallType(key.toString() as CallType);
+  };
+
+  const onClose = () => {};
+
   return (
     <PopoverMenuTrigger placement="bottom">
       <Button variant="dropdown" className={commonStyles.headline}>
@@ -55,11 +61,8 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
         <Menu
           {...props}
           label={t("Call type menu")}
-          onAction={(key) => {
+          onAction={onAction}
-            const callType = key.toString();
+          onClose={onClose}
-            setCallType(callType as CallType);
-          }}
-          onClose={() => {}}
         >
           <Item key={CallType.Video} textValue={t("Video call")}>
             <VideoIcon />

src/room/GridLayoutMenu.tsx

@@ -38,6 +38,15 @@ export function GridLayoutMenu({ layout, setLayout }: Props) {
   const { t } = useTranslation();
   const tooltip = useCallback(() => t("Change layout"), [t]);
 
+  const onAction = useCallback(
+    (key: React.Key) => {
+      setLayout(key.toString() as Layout);
+    },
+    [setLayout]
+  );
+
+  const onClose = useCallback(() => {}, []);
+
   return (
     <PopoverMenuTrigger placement="bottom right">
       <TooltipTrigger tooltip={tooltip}>
@@ -49,8 +58,8 @@ export function GridLayoutMenu({ layout, setLayout }: Props) {
         <Menu
           {...props}
           label={t("Grid layout menu")}
-          onAction={(key) => setLayout(key.toString() as Layout)}
+          onAction={onAction}
-          onClose={() => {}}
+          onClose={onClose}
         >
           <Item key="freedom" textValue={t("Freedom")}>
             <FreedomIcon />