diff --git a/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx b/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx
index 32ffef2625..4327748cca 100644
--- a/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx
+++ b/webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
 
 type Props = {
     name: string;
@@ -10,44 +10,45 @@ type Props = {
     updateOption: (checked: boolean, name: string) => void;
 };
 
-class FilterCheckbox extends React.PureComponent<Props> {
-    toggleOption = (e: React.MouseEvent) => {
+function FilterCheckbox({
+    name,
+    checked,
+    label,
+    updateOption,
+}: Props) {
+    const toggleOption = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        const {checked, name, updateOption} = this.props;
         updateOption(!checked, name);
-    };
+    }, [name, checked, updateOption]);
 
-    render() {
-        const {name, checked, label} = this.props;
-        return (
-            <div
-                className='FilterList_checkbox'
-                onClick={this.toggleOption}
-            >
-                <label>
-                    {checked &&
-                        <input
-                            type='checkbox'
-                            id={name}
-                            name={name}
-                            defaultChecked={true}
-                        />
-                    }
+    return (
+        <div
+            className='FilterList_checkbox'
+            onClick={toggleOption}
+        >
+            <label>
+                {checked &&
+                    <input
+                        type='checkbox'
+                        id={name}
+                        name={name}
+                        defaultChecked={true}
+                    />
+                }
 
-                    {!checked &&
-                        <input
-                            type='checkbox'
-                            id={name}
-                            name={name}
-                            defaultChecked={false}
-                        />
-                    }
-                    {label}
-                </label>
-            </div>
-        );
-    }
+                {!checked &&
+                    <input
+                        type='checkbox'
+                        id={name}
+                        name={name}
+                        defaultChecked={false}
+                    />
+                }
+                {label}
+            </label>
+        </div>
+    );
 }
 
-export default FilterCheckbox;
+export default React.memo(FilterCheckbox);