diff --git a/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx b/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx
index 5a09842d0e..5c82fcf790 100644
--- a/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx
+++ b/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.test.tsx
@@ -22,7 +22,7 @@ describe('components/ChannelHeaderMobile/UnmuteChannelButton', () => {
     };
 
     it('should match snapshot', () => {
-        const wrapper = shallow<UnmuteChannelButton>(<UnmuteChannelButton {...baseProps}/>);
+        const wrapper = shallow(<UnmuteChannelButton {...baseProps}/>);
 
         expect(wrapper).toMatchSnapshot();
     });
@@ -31,7 +31,7 @@ describe('components/ChannelHeaderMobile/UnmuteChannelButton', () => {
         const props = baseProps;
         props.actions.updateChannelNotifyProps = jest.fn();
 
-        const wrapper = shallow<UnmuteChannelButton>(<UnmuteChannelButton {...props}/>);
+        const wrapper = shallow(<UnmuteChannelButton {...props}/>);
         wrapper.simulate('click');
 
         expect(props.actions.updateChannelNotifyProps).toBeCalledWith(
diff --git a/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx b/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx
index 6ee4bb342f..52b4aa670c 100644
--- a/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx
+++ b/webapp/channels/src/components/channel_header_mobile/unmute_channel_button/unmute_channel_button.tsx
@@ -8,37 +8,29 @@ import type {ChannelNotifyProps} from '@mattermost/types/channels';
 import {NotificationLevels} from 'utils/constants';
 
 type Actions = {
-    updateChannelNotifyProps: (userId: string, channelId: string, props: ChannelNotifyProps) => void;
-}
+    updateChannelNotifyProps: (userId: string, channelId: string, props: Pick<ChannelNotifyProps, 'mark_unread'>) => void;
+};
 
 type Props = {
     user: { id: string };
     channel: { id: string };
     actions: Actions;
-}
+};
 
-export default class UnmuteChannelButton extends React.PureComponent<Props> {
-    handleClick = (): void => {
-        const {
-            user,
-            channel,
-            actions: {
-                updateChannelNotifyProps,
-            },
-        } = this.props;
-
-        updateChannelNotifyProps(user.id, channel.id, {mark_unread: NotificationLevels.ALL} as ChannelNotifyProps);
+const UnmuteChannelButton = ({user, channel, actions}: Props) => {
+    const handleClick = () => {
+        actions.updateChannelNotifyProps(user.id, channel.id, {mark_unread: NotificationLevels.ALL});
     };
 
-    render(): JSX.Element {
-        return (
-            <button
-                type='button'
-                className='navbar-toggle icon icon__mute'
-                onClick={this.handleClick}
-            >
-                <span className='fa fa-bell-slash-o icon'/>
-            </button>
-        );
-    }
-}
+    return (
+        <button
+            type='button'
+            className='navbar-toggle icon icon__mute'
+            onClick={handleClick}
+        >
+            <span className='fa fa-bell-slash-o icon'/>
+        </button>
+    );
+};
+
+export default React.memo(UnmuteChannelButton);