diff --git a/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap b/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap
index 255850ed45..7ca4af943d 100644
--- a/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     inHeaderDropdown={true}
     openUp={false}
   />
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(ToggleFavoriteChannel)
       channel={
         Object {
@@ -231,8 +231,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         }
       }
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(Component)
       channelId="test-channel-id"
       permissions={
@@ -424,8 +424,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         text="View Members"
       />
     </Connect(Component)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
       dialogProps={
         Object {
@@ -496,8 +496,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       show={false}
       text="Convert to Private Channel"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(Component)
       channelId="test-channel-id"
       permissions={
@@ -780,9 +780,9 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     <Connect(Component)
       isArchived={false}
     />
-  </MenuGroup>
-  <MenuGroup />
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
+  <Memo(MenuGroup)>
     <Connect(Component)
       channelId="test-channel-id"
       permissions={
@@ -828,7 +828,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         text="Unarchive Channel"
       />
     </Connect(Component)>
-  </MenuGroup>
+  </Memo(MenuGroup)>
 </Fragment>
 `;
 
@@ -879,7 +879,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     inHeaderDropdown={true}
     openUp={false}
   />
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(ToggleFavoriteChannel)
       channel={
         Object {
@@ -1063,8 +1063,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         }
       }
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(Component)
       channelId="test-channel-id"
       permissions={
@@ -1256,8 +1256,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         text="View Members"
       />
     </Connect(Component)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
       dialogProps={
         Object {
@@ -1328,8 +1328,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       show={false}
       text="Convert to Private Channel"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(Component)
       channelId="test-channel-id"
       permissions={
@@ -1612,8 +1612,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     <Connect(Component)
       isArchived={false}
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       id="plugin-1_pluginmenuitem"
       key="plugin-1_pluginmenuitem"
@@ -1628,8 +1628,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       show={true}
       text="plugin-2-text"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(Component)
       channelId="test-channel-id"
       permissions={
@@ -1675,6 +1675,6 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         text="Unarchive Channel"
       />
     </Connect(Component)>
-  </MenuGroup>
+  </Memo(MenuGroup)>
 </Fragment>
 `;
diff --git a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index 5a81689165..76ab308d4f 100644
--- a/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
     openLeft={false}
     openUp={false}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemExternalLink
         iconClassName="icon-file-text-outline"
         id="mattermostUserGuideLink"
@@ -84,7 +84,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
         show={true}
         text="Keyboard shortcuts"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -136,7 +136,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
     openLeft={false}
     openUp={false}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemExternalLink
         iconClassName="icon-file-text-outline"
         id="mattermostUserGuideLink"
@@ -165,7 +165,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
         show={true}
         text="Keyboard shortcuts"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -217,7 +217,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
     openLeft={false}
     openUp={false}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemExternalLink
         iconClassName="icon-file-text-outline"
         id="mattermostUserGuideLink"
@@ -262,7 +262,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
         show={true}
         text="Test Item"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap
index 224874b855..dec2d91f64 100644
--- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/global/product_switcher_menu should match snapshot with id 1`] = `
-<MenuGroup>
+<Memo(MenuGroup)>
   <div
     onClick={[Function]}
   >
@@ -195,11 +195,11 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
       text="About "
     />
   </div>
-</MenuGroup>
+</Memo(MenuGroup)>
 `;
 
 exports[`components/global/product_switcher_menu should match snapshot with most of the thing enabled 1`] = `
-<MenuGroup>
+<Memo(MenuGroup)>
   <div
     onClick={[Function]}
   >
@@ -393,7 +393,7 @@ exports[`components/global/product_switcher_menu should match snapshot with most
       text="About "
     />
   </div>
-</MenuGroup>
+</Memo(MenuGroup)>
 `;
 
 exports[`components/global/product_switcher_menu should match userGroups snapshot with EnableCustomGroups config 1`] = `
diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx
index 3d86aef4d2..ad8a9dc93a 100644
--- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx
+++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.test.tsx
@@ -6,17 +6,19 @@ import React from 'react';
 
 import type {UserProfile} from '@mattermost/types/users';
 
+import MenuGroup from 'components/widgets/menu/menu_group';
+
 import {TestHelper} from 'utils/test_helper';
 
 import ProductMenuList from './product_menu_list';
 import type {Props as ProductMenuListProps} from './product_menu_list';
 
 describe('components/global/product_switcher_menu', () => {
-    // Neccessary for components enhanced by HOCs due to issue with enzyme.
+    // Necessary for components enhanced by HOCs due to issue with enzyme.
     // See https://github.com/enzymejs/enzyme/issues/539
     const getMenuWrapper = (props: ProductMenuListProps) => {
         const wrapper = shallow(<ProductMenuList {...props}/>);
-        return wrapper.find('MenuGroup').shallow();
+        return wrapper.find(MenuGroup).shallow();
     };
 
     const user = TestHelper.getUserMock({
diff --git a/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap b/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap
index 766812bc44..fef7faf000 100644
--- a/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap
+++ b/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
 <Menu
   ariaLabel="team menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -208,8 +208,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -227,8 +227,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         to="/create_team"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup />
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
 </Menu>
 `;
 
@@ -237,7 +237,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
   ariaLabel="team menu"
   id="test-id"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -409,8 +409,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -428,8 +428,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
         to="/create_team"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup />
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
 </Menu>
 `;
 
@@ -437,7 +437,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
 <Menu
   ariaLabel="team menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -609,8 +609,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -628,8 +628,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         to="/create_team"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup />
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
 </Menu>
 `;
 
@@ -637,7 +637,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
 <Menu
   ariaLabel="main menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -649,8 +649,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         id="menuCloudTrial"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -662,8 +662,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         id="startTrial"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={
         <i
@@ -688,8 +688,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       show={true}
       text="Saved messages"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
       dialogProps={
         Object {
@@ -738,8 +738,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       show={true}
       text="Settings"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -799,8 +799,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         text="Invite People"
       />
     </Connect(TeamPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -921,8 +921,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         text="View Members"
       />
     </Connect(TeamPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -968,17 +968,17 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup />
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
+  <Memo(MenuGroup)>
     <MenuItemLink
       id="integrations"
       show={false}
       text="Integrations"
       to="/team_name/integrations"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemExternalLink
       icon={
         <i
@@ -1029,8 +1029,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       show={true}
       text="About Mattermost"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={
         <i
@@ -1042,7 +1042,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       show={true}
       text="Log Out"
     />
-  </MenuGroup>
+  </Memo(MenuGroup)>
 </Menu>
 `;
 
@@ -1050,7 +1050,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
 <Menu
   ariaLabel="team menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -1222,8 +1222,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1241,8 +1241,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         to="/create_team"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup />
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
 </Menu>
 `;
 
@@ -1250,7 +1250,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
 <Menu
   ariaLabel="main menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1262,8 +1262,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         id="menuCloudTrial"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1275,8 +1275,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         id="startTrial"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={
         <i
@@ -1301,8 +1301,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       show={true}
       text="Saved messages"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
       dialogProps={
         Object {
@@ -1351,8 +1351,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       show={true}
       text="Settings"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -1412,8 +1412,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         text="Invite People"
       />
     </Connect(TeamPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -1534,8 +1534,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         text="View Members"
       />
     </Connect(TeamPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1581,17 +1581,17 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup />
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup) />
+  <Memo(MenuGroup)>
     <MenuItemLink
       id="integrations"
       show={false}
       text="Integrations"
       to="/team_name/integrations"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemExternalLink
       icon={
         <i
@@ -1644,8 +1644,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       show={true}
       text="About Mattermost"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={
         <i
@@ -1657,7 +1657,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       show={true}
       text="Log Out"
     />
-  </MenuGroup>
+  </Memo(MenuGroup)>
 </Menu>
 `;
 
@@ -1665,7 +1665,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
 <Menu
   ariaLabel="team menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -1837,8 +1837,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1856,8 +1856,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         to="/create_team"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={false}
       id="plugin-id-1_pluginmenuitem"
@@ -1872,7 +1872,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
       onClick={[Function]}
       show={true}
     />
-  </MenuGroup>
+  </Memo(MenuGroup)>
 </Menu>
 `;
 
@@ -1880,7 +1880,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
 <Menu
   ariaLabel="main menu"
 >
-  <MenuGroup>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1892,8 +1892,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         id="menuCloudTrial"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -1905,8 +1905,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         id="startTrial"
       />
     </Connect(SystemPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={
         <i
@@ -1931,8 +1931,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       show={true}
       text="Saved messages"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
       dialogProps={
         Object {
@@ -1981,8 +1981,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       show={true}
       text="Settings"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -2042,8 +2042,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         text="Invite People"
       />
     </Connect(TeamPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(TeamPermissionGate)
       permissions={
         Array [
@@ -2164,8 +2164,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         text="View Members"
       />
     </Connect(TeamPermissionGate)>
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <Connect(SystemPermissionGate)
       permissions={
         Array [
@@ -2211,8 +2211,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       show={true}
       text="Leave Team"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       id="plugin-id-1_pluginmenuitem"
       key="plugin-id-1_pluginmenuitem"
@@ -2225,16 +2225,16 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       onClick={[Function]}
       show={true}
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemLink
       id="integrations"
       show={false}
       text="Integrations"
       to="/team_name/integrations"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemExternalLink
       icon={
         <i
@@ -2285,8 +2285,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       show={true}
       text="About Mattermost"
     />
-  </MenuGroup>
-  <MenuGroup>
+  </Memo(MenuGroup)>
+  <Memo(MenuGroup)>
     <MenuItemAction
       icon={
         <i
@@ -2298,6 +2298,6 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       show={true}
       text="Log Out"
     />
-  </MenuGroup>
+  </Memo(MenuGroup)>
 </Menu>
 `;
diff --git a/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap b/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
index 4d51cfa22d..e528c330ce 100644
--- a/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/search/user_guide_dropdown/__snapshots__/user_guide_dropdown.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
     openLeft={true}
     openUp={false}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemExternalLink
         id="askTheCommunityLink"
         onClick={[Function]}
@@ -71,7 +71,7 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
         show={true}
         text="Keyboard shortcuts"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -121,7 +121,7 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
     openLeft={true}
     openUp={false}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemExternalLink
         id="helpResourcesLink"
         show={true}
@@ -140,7 +140,7 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
         show={true}
         text="Keyboard shortcuts"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
diff --git a/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap b/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap
index 52530b0f03..75cd3ebeed 100644
--- a/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/__snapshots__/add_channels_cta_button.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
     ariaLabel="Add Channels Dropdown"
     id="AddChannelCtaDropdown"
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <i
@@ -51,7 +51,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
         show={true}
         text="Browse channels"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
diff --git a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
index 618ab90559..35f1bf537f 100644
--- a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -66,8 +66,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -189,8 +189,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -216,8 +216,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -229,7 +229,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -292,7 +292,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -300,8 +300,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="In a meeting"
         className="MenuItem__primary-text custom_status__row"
@@ -381,8 +381,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
           withinBrackets={true}
         />
       </MenuItemToggleModalRedux>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -504,8 +504,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -531,8 +531,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -544,7 +544,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -607,7 +607,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -615,8 +615,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Set a Custom Status"
         className="MenuItem__primary-text custom_status__row"
@@ -648,8 +648,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           </Text>
         </span>
       </MenuItemToggleModalRedux>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -771,8 +771,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -798,8 +798,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -811,7 +811,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -874,7 +874,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -882,8 +882,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Set a Custom Status"
         className="MenuItem__primary-text custom_status__row"
@@ -915,8 +915,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           </Text>
         </span>
       </MenuItemToggleModalRedux>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -1038,8 +1038,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -1065,8 +1065,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -1078,7 +1078,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -1141,7 +1141,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -1149,8 +1149,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Set a Custom Status"
         className="MenuItem__primary-text custom_status__row"
@@ -1183,8 +1183,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           <PulsatingDot />
         </span>
       </MenuItemToggleModalRedux>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -1306,8 +1306,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -1333,8 +1333,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -1346,7 +1346,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -1417,7 +1417,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -1425,8 +1425,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -1548,8 +1548,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -1575,8 +1575,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -1588,7 +1588,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -1651,7 +1651,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -1659,8 +1659,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -1782,8 +1782,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -1809,8 +1809,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -1822,7 +1822,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -1885,7 +1885,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -1893,8 +1893,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Set a Custom Status"
         className="MenuItem__primary-text custom_status__row"
@@ -1926,8 +1926,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
           </Text>
         </span>
       </MenuItemToggleModalRedux>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -2049,8 +2049,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -2076,8 +2076,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -2089,7 +2089,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
@@ -2152,7 +2152,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
         </Text>
       </div>
     </Memo(MenuHeader)>
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="out of office"
         extraText="Automatic Replies are enabled"
@@ -2160,8 +2160,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
         show={false}
         text="Out of office"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="In a meeting"
         className="MenuItem__primary-text custom_status__row"
@@ -2241,8 +2241,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
           withinBrackets={true}
         />
       </MenuItemToggleModalRedux>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         ariaLabel="online"
         icon={
@@ -2364,8 +2364,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
         show={true}
         text="Offline"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         ariaLabel="Profile"
         dialogProps={
@@ -2391,8 +2391,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
         show={true}
         text="Profile"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <ExitToAppIcon
@@ -2404,7 +2404,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </Menu>
 </MenuWrapper>
 `;
diff --git a/webapp/channels/src/components/widgets/menu/menu_group.tsx b/webapp/channels/src/components/widgets/menu/menu_group.tsx
index cafbf749d7..38149bee49 100644
--- a/webapp/channels/src/components/widgets/menu/menu_group.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_group.tsx
@@ -8,32 +8,30 @@ import './menu_group.scss';
 type Props = {
     divider?: React.ReactNode;
     children?: React.ReactNode;
-}
+};
 
 /**
  * @deprecated Use the "webapp/channels/src/components/menu" instead.
  */
-export default class MenuGroup extends React.PureComponent<Props> {
-    handleDividerClick = (e: React.MouseEvent): void => {
+const MenuGroup = (props: Props) => {
+    const handleDividerClick = (e: React.MouseEvent): void => {
         e.preventDefault();
         e.stopPropagation();
     };
 
-    public render() {
-        const {children} = this.props;
+    const divider = props.divider ?? (
+        <li
+            className='MenuGroup menu-divider'
+            onClick={handleDividerClick}
+        />
+    );
 
-        const divider = this.props.divider || (
-            <li
-                className='MenuGroup menu-divider'
-                onClick={this.handleDividerClick}
-            />
-        );
+    return (
+        <>
+            {divider}
+            {props.children}
+        </>
+    );
+};
 
-        return (
-            <React.Fragment>
-                {divider}
-                {children}
-            </React.Fragment>
-        );
-    }
-}
+export default React.memo(MenuGroup);
diff --git a/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap b/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap
index 07452b5091..f6dbd6236e 100644
--- a/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap
+++ b/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
     onClick={[Function]}
     style={Object {}}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <Connect(SystemPermissionGate)
         permissions={
           Array [
@@ -23,8 +23,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           id="menuCloudTrial"
         />
       </Connect(SystemPermissionGate)>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <Connect(SystemPermissionGate)
         permissions={
           Array [
@@ -36,8 +36,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           id="startTrial"
         />
       </Connect(SystemPermissionGate)>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <i
@@ -62,8 +62,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         show={true}
         text="Saved messages"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemToggleModalRedux
         dialogProps={
           Object {
@@ -112,8 +112,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         show={true}
         text="Settings"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <Connect(TeamPermissionGate)
         permissions={
           Array [
@@ -173,8 +173,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           text="Invite People"
         />
       </Connect(TeamPermissionGate)>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <Connect(TeamPermissionGate)
         permissions={
           Array [
@@ -295,8 +295,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           text="View Members"
         />
       </Connect(TeamPermissionGate)>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <Connect(SystemPermissionGate)
         permissions={
           Array [
@@ -342,8 +342,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         show={false}
         text="Leave Team"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         id="someplugin_pluginmenuitem"
         key="someplugin_pluginmenuitem"
@@ -351,16 +351,16 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         show={true}
         text="some plugin text"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemLink
         id="integrations"
         show={false}
         text="Integrations"
         to="/somename/integrations"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemExternalLink
         icon={
           <i
@@ -411,8 +411,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         show={true}
         text="About Mattermost"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={
           <i
@@ -424,7 +424,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         show={true}
         text="Log Out"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </ul>
 </div>
 `;
@@ -440,7 +440,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
     onClick={[Function]}
     style={Object {}}
   >
-    <MenuGroup>
+    <Memo(MenuGroup)>
       <Connect(TeamPermissionGate)
         permissions={
           Array [
@@ -612,8 +612,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
         show={false}
         text="Leave Team"
       />
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <Connect(SystemPermissionGate)
         permissions={
           Array [
@@ -631,8 +631,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           to="/create_team"
         />
       </Connect(SystemPermissionGate)>
-    </MenuGroup>
-    <MenuGroup>
+    </Memo(MenuGroup)>
+    <Memo(MenuGroup)>
       <MenuItemAction
         icon={false}
         id="someplugin_pluginmenuitem"
@@ -641,7 +641,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
         show={true}
         text="some plugin text"
       />
-    </MenuGroup>
+    </Memo(MenuGroup)>
   </ul>
 </div>
 `;