From 2293cbf1f0b8b7fd1bb2db7f2206f6462ac315c2 Mon Sep 17 00:00:00 2001
From: Daniel Abramov <daniel.abramov@element.io>
Date: Mon, 3 Jul 2023 18:28:43 +0100
Subject: [PATCH] Use memoized callbacks when passing to components

---
 src/home/CallTypeDropdown.tsx | 13 ++++++++-----
 src/room/GridLayoutMenu.tsx   | 13 +++++++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/home/CallTypeDropdown.tsx b/src/home/CallTypeDropdown.tsx
index 9b02f350..f24d3d48 100644
--- a/src/home/CallTypeDropdown.tsx
+++ b/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) => {
-            const callType = key.toString();
-            setCallType(callType as CallType);
-          }}
-          onClose={() => {}}
+          onAction={onAction}
+          onClose={onClose}
         >
           <Item key={CallType.Video} textValue={t("Video call")}>
             <VideoIcon />
diff --git a/src/room/GridLayoutMenu.tsx b/src/room/GridLayoutMenu.tsx
index 7e65f3b0..1722f20a 100644
--- a/src/room/GridLayoutMenu.tsx
+++ b/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)}
-          onClose={() => {}}
+          onAction={onAction}
+          onClose={onClose}
         >
           <Item key="freedom" textValue={t("Freedom")}>
             <FreedomIcon />