diff --git a/webapp/channels/src/components/notify_counts/notify_counts.test.tsx b/webapp/channels/src/components/notify_counts/notify_counts.test.tsx
index 80e819b018..b9de5f58a3 100644
--- a/webapp/channels/src/components/notify_counts/notify_counts.test.tsx
+++ b/webapp/channels/src/components/notify_counts/notify_counts.test.tsx
@@ -37,6 +37,6 @@ describe('components/notify_counts', () => {
         const {mountOptions} = mockStore();
         const wrapper = mount(<NotifyCounts/>, mountOptions);
 
-        expect(wrapper.isEmptyRender()).toBe(true);
+        expect(wrapper.html()).toBe('');
     });
 });
diff --git a/webapp/channels/src/components/notify_counts/notify_counts.tsx b/webapp/channels/src/components/notify_counts/notify_counts.tsx
index 3b63884980..7632d4f707 100644
--- a/webapp/channels/src/components/notify_counts/notify_counts.tsx
+++ b/webapp/channels/src/components/notify_counts/notify_counts.tsx
@@ -4,15 +4,14 @@
 import React from 'react';
 
 import type {BasicUnreadMeta} from 'mattermost-redux/selectors/entities/channels';
-type Props = BasicUnreadMeta;
 
-export default class NotifyCounts extends React.PureComponent<Props> {
-    render() {
-        if (this.props.unreadMentionCount) {
-            return <span className='badge badge-notify'>{this.props.unreadMentionCount}</span>;
-        } else if (this.props.isUnread) {
-            return <span className='badge badge-notify'>{'•'}</span>;
-        }
-        return null;
+const NotifyCounts = ({unreadMentionCount, isUnread}: BasicUnreadMeta) => {
+    if (unreadMentionCount) {
+        return <span className='badge badge-notify'>{unreadMentionCount}</span>;
+    } else if (isUnread) {
+        return <span className='badge badge-notify'>{'•'}</span>;
     }
-}
+    return null;
+};
+
+export default React.memo(NotifyCounts);