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 b1c1727a7b..4ca71b954f 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
@@ -233,7 +233,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     />
   </MenuGroup>
   <MenuGroup>
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -296,7 +296,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={false}
         text="Add Members"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
     <Connect(ToggleChannelMembersRHS)
       channel={
         Object {
@@ -321,7 +321,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       show={false}
       text="View Members"
     />
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -388,8 +388,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Manage Members"
       />
-    </Connect(ChannelPermissionGate)>
-    <Connect(ChannelPermissionGate)
+    </Connect(Component)>
+    <Connect(Component)
       channelId="test-channel-id"
       invert={true}
       permissions={
@@ -423,7 +423,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="View Members"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
   </MenuGroup>
   <MenuGroup>
     <MenuItemToggleModalRedux
@@ -498,7 +498,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     />
   </MenuGroup>
   <MenuGroup>
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -612,8 +612,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Rename Channel"
       />
-    </Connect(ChannelPermissionGate)>
-    <Connect(ChannelPermissionGate)
+    </Connect(Component)>
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -642,7 +642,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Convert to Private Channel"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
     <Connect(LeaveChannel)
       channel={
         Object {
@@ -667,7 +667,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       isDefault={false}
       isGuestUser={false}
     />
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -713,7 +713,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Archive Channel"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
     <Connect(CloseMessage)
       channel={
         Object {
@@ -783,7 +783,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
   </MenuGroup>
   <MenuGroup />
   <MenuGroup>
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -827,7 +827,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={false}
         text="Unarchive Channel"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
   </MenuGroup>
 </Fragment>
 `;
@@ -1065,7 +1065,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     />
   </MenuGroup>
   <MenuGroup>
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1128,7 +1128,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={false}
         text="Add Members"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
     <Connect(ToggleChannelMembersRHS)
       channel={
         Object {
@@ -1153,7 +1153,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       show={false}
       text="View Members"
     />
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1220,8 +1220,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Manage Members"
       />
-    </Connect(ChannelPermissionGate)>
-    <Connect(ChannelPermissionGate)
+    </Connect(Component)>
+    <Connect(Component)
       channelId="test-channel-id"
       invert={true}
       permissions={
@@ -1255,7 +1255,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="View Members"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
   </MenuGroup>
   <MenuGroup>
     <MenuItemToggleModalRedux
@@ -1330,7 +1330,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     />
   </MenuGroup>
   <MenuGroup>
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1444,8 +1444,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Rename Channel"
       />
-    </Connect(ChannelPermissionGate)>
-    <Connect(ChannelPermissionGate)
+    </Connect(Component)>
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1474,7 +1474,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Convert to Private Channel"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
     <Connect(LeaveChannel)
       channel={
         Object {
@@ -1499,7 +1499,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       isDefault={false}
       isGuestUser={false}
     />
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1545,7 +1545,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Archive Channel"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
     <Connect(CloseMessage)
       channel={
         Object {
@@ -1630,7 +1630,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     />
   </MenuGroup>
   <MenuGroup>
-    <Connect(ChannelPermissionGate)
+    <Connect(Component)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1674,7 +1674,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={false}
         text="Unarchive Channel"
       />
-    </Connect(ChannelPermissionGate)>
+    </Connect(Component)>
   </MenuGroup>
 </Fragment>
 `;
diff --git a/webapp/channels/src/components/permissions_gates/channel_permission_gate/__snapshots__/channel_permission_gate.test.tsx.snap b/webapp/channels/src/components/permissions_gates/channel_permission_gate/__snapshots__/channel_permission_gate.test.tsx.snap
index 9104ebdd15..12e4fe151a 100644
--- a/webapp/channels/src/components/permissions_gates/channel_permission_gate/__snapshots__/channel_permission_gate.test.tsx.snap
+++ b/webapp/channels/src/components/permissions_gates/channel_permission_gate/__snapshots__/channel_permission_gate.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="invalid_id"
     permissions={
       Array [
@@ -22,7 +22,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="invalid_id"
       dispatch={[Function]}
       hasPermission={false}
@@ -32,8 +32,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
         ]
       }
       teamId="team_id"
-    />
-  </Connect(ChannelPermissionGate)>
+    >
+      <p />
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -50,7 +52,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     permissions={
       Array [
@@ -59,7 +61,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId=""
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={false}
@@ -69,8 +71,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
         ]
       }
       teamId=""
-    />
-  </Connect(ChannelPermissionGate)>
+    >
+      <p />
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -129,7 +133,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     permissions={
       Array [
@@ -138,7 +142,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={true}
@@ -152,8 +156,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
       <p>
         Valid permission (shown)
       </p>
-    </ChannelPermissionGate>
-  </Connect(ChannelPermissionGate)>
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -170,7 +174,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     invert={true}
     permissions={
@@ -180,7 +184,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={true}
@@ -191,8 +195,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
         ]
       }
       teamId="team_id"
-    />
-  </Connect(ChannelPermissionGate)>
+    >
+      <p />
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -209,7 +215,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     permissions={
       Array [
@@ -218,7 +224,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={true}
@@ -232,8 +238,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
       <p>
         Valid permission (shown)
       </p>
-    </ChannelPermissionGate>
-  </Connect(ChannelPermissionGate)>
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -250,7 +256,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     permissions={
       Array [
@@ -259,7 +265,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={true}
@@ -273,8 +279,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
       <p>
         Valid permission (shown)
       </p>
-    </ChannelPermissionGate>
-  </Connect(ChannelPermissionGate)>
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -291,7 +297,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     permissions={
       Array [
@@ -300,7 +306,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId=""
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={true}
@@ -314,8 +320,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
       <p>
         Valid permission (shown)
       </p>
-    </ChannelPermissionGate>
-  </Connect(ChannelPermissionGate)>
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -332,7 +338,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     permissions={
       Array [
@@ -341,7 +347,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={false}
@@ -351,8 +357,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
         ]
       }
       teamId="team_id"
-    />
-  </Connect(ChannelPermissionGate)>
+    >
+      <p />
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
 
@@ -369,7 +377,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
   }
 >
-  <Connect(ChannelPermissionGate)
+  <Connect(Component)
     channelId="channel_id"
     invert={true}
     permissions={
@@ -379,7 +387,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
     }
     teamId="team_id"
   >
-    <ChannelPermissionGate
+    <Memo(ChannelPermissionGate)
       channelId="channel_id"
       dispatch={[Function]}
       hasPermission={false}
@@ -394,7 +402,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
       <p>
         Invalid permission but inverted (shown)
       </p>
-    </ChannelPermissionGate>
-  </Connect(ChannelPermissionGate)>
+    </Memo(ChannelPermissionGate)>
+  </Connect(Component)>
 </Provider>
 `;
diff --git a/webapp/channels/src/components/permissions_gates/channel_permission_gate/channel_permission_gate.tsx b/webapp/channels/src/components/permissions_gates/channel_permission_gate/channel_permission_gate.tsx
index d45f0ff666..27d612a041 100644
--- a/webapp/channels/src/components/permissions_gates/channel_permission_gate/channel_permission_gate.tsx
+++ b/webapp/channels/src/components/permissions_gates/channel_permission_gate/channel_permission_gate.tsx
@@ -36,16 +36,11 @@ type Props = {
     children: React.ReactNode;
 }
 
-export default class ChannelPermissionGate extends React.PureComponent<Props> {
-    render() {
-        const {hasPermission, children, invert = false} = this.props;
-
-        if (hasPermission && !invert) {
-            return children;
-        }
-        if (!hasPermission && invert) {
-            return children;
-        }
-        return null;
+const ChannelPermissionGate = ({hasPermission, children, invert = false}: Props) => {
+    if (hasPermission !== invert) {
+        return <>{children}</>;
     }
-}
+    return null;
+};
+
+export default React.memo(ChannelPermissionGate);
diff --git a/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap b/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
index 2d8894ebe9..d4d371142d 100644
--- a/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_view/PostReaction should match snapshot 1`] = `
-<Connect(ChannelPermissionGate)
+<Connect(Component)
   channelId="current_channel_id"
   permissions={
     Array [
@@ -52,5 +52,5 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
       />
     </button>
   </OverlayTrigger>
-</Connect(ChannelPermissionGate)>
+</Connect(Component)>
 `;
diff --git a/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap b/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap
index 9d0ee427d1..fe71ea5d0e 100644
--- a/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
         target={[Function]}
         topOffset={-5}
       />
-      <Connect(ChannelPermissionGate)
+      <Connect(Component)
         channelId=""
         permissions={
           Array [
@@ -105,7 +105,7 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
             </span>
           </button>
         </OverlayTrigger>
-      </Connect(ChannelPermissionGate)>
+      </Connect(Component)>
     </span>
   </div>
 </div>