diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
index 1d62288a04..46dda51255 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
@@ -595,7 +595,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             }
             value={true}
           />
-          <ColorSetting
+          <Memo(ColorSetting)
             disabled={false}
             helpText={
               <SchemaText
diff --git a/webapp/channels/src/components/admin_console/color_setting.tsx b/webapp/channels/src/components/admin_console/color_setting.tsx
index 54af4466d8..66b91111ba 100644
--- a/webapp/channels/src/components/admin_console/color_setting.tsx
+++ b/webapp/channels/src/components/admin_console/color_setting.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';
 
 import ColorInput from 'components/color_input';
 
@@ -16,27 +16,27 @@ type Props = {
     disabled?: boolean;
 }
 
-export default class ColorSetting extends React.PureComponent<Props> {
-    private handleChange = (color: string) => {
-        if (this.props.onChange) {
-            this.props.onChange(this.props.id, color);
+const ColorSetting = (props: Props) => {
+    const handleChange = useCallback((color: string) => {
+        if (props.onChange) {
+            props.onChange(props.id, color);
         }
-    };
+    }, [props.id, props.onChange]);
 
-    public render() {
-        return (
-            <Setting
-                label={this.props.label}
-                helpText={this.props.helpText}
-                inputId={this.props.id}
-            >
-                <ColorInput
-                    id={this.props.id}
-                    value={this.props.value}
-                    onChange={this.handleChange}
-                    isDisabled={this.props.disabled}
-                />
-            </Setting>
-        );
-    }
-}
+    return (
+        <Setting
+            label={props.label}
+            helpText={props.helpText}
+            inputId={props.id}
+        >
+            <ColorInput
+                id={props.id}
+                value={props.value}
+                onChange={handleChange}
+                isDisabled={props.disabled}
+            />
+        </Setting>
+    );
+};
+
+export default React.memo(ColorSetting);