diff --git a/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx b/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx
index 7e284a7f6b..2697cb3fc5 100644
--- a/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx
+++ b/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx
@@ -204,7 +204,7 @@ export default class DialogElement extends React.PureComponent<Props, State> {
                     label={displayNameContent}
                     value={boolValue || false}
                     helpText={helpTextContent}
-                    placeholder={placeholder}
+                    placeholder={placeholder || ''}
                     onChange={onChange}
                 />
             );
diff --git a/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx b/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx
index da6dffe14e..1c6963206a 100644
--- a/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx
+++ b/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx
@@ -8,12 +8,15 @@ import BoolSetting from './bool_setting';
 
 describe('components/widgets/settings/BoolSetting', () => {
     test('render component with required props', () => {
+        const onChange = jest.fn();
         const wrapper = shallow(
+
             <BoolSetting
                 id='string.id'
                 label='some label'
                 value={true}
                 placeholder='Text aligned with checkbox'
+                onChange={onChange}
             />,
         );
         expect(wrapper).toMatchInlineSnapshot(`
diff --git a/webapp/channels/src/components/widgets/settings/bool_setting.tsx b/webapp/channels/src/components/widgets/settings/bool_setting.tsx
index a776512245..224461a2e0 100644
--- a/webapp/channels/src/components/widgets/settings/bool_setting.tsx
+++ b/webapp/channels/src/components/widgets/settings/bool_setting.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {ChangeEvent} from 'react';
 import React from 'react';
 
 import Setting from './setting';
@@ -8,49 +9,55 @@ import Setting from './setting';
 type Props = {
     id: string;
     label: React.ReactNode;
-    labelClassName: string;
+    labelClassName?: string;
     helpText?: React.ReactNode;
     placeholder: string;
     value: boolean;
     disabled?: boolean;
-    inputClassName: string;
+    inputClassName?: string;
     onChange(name: string, value: any): void; // value is any since onChange is a common func for inputs and checkboxes
     autoFocus?: boolean;
 }
 
-export default class BoolSetting extends React.PureComponent<Props> {
-    public static defaultProps: Partial<Props> = {
-        labelClassName: '',
-        inputClassName: '',
+const BoolSetting = ({
+    id,
+    label,
+    labelClassName = '',
+    helpText,
+    placeholder,
+    value,
+    disabled,
+    inputClassName = '',
+    onChange,
+    autoFocus,
+}: Props) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange(id, e.target.checked);
     };
 
-    private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-        this.props.onChange(this.props.id, e.target.checked);
-    };
+    return (
+        <Setting
+            label={label}
+            labelClassName={labelClassName}
+            inputClassName={inputClassName}
+            helpText={helpText}
+            inputId={id}
+        >
+            <div className='checkbox'>
+                <label>
+                    <input
+                        id={id}
+                        disabled={disabled}
+                        autoFocus={autoFocus}
+                        type='checkbox'
+                        checked={value}
+                        onChange={handleChange}
+                    />
+                    <span>{placeholder}</span>
+                </label>
+            </div>
+        </Setting>
+    );
+};
 
-    public render(): JSX.Element {
-        return (
-            <Setting
-                label={this.props.label}
-                labelClassName={this.props.labelClassName}
-                inputClassName={this.props.inputClassName}
-                helpText={this.props.helpText}
-                inputId={this.props.id}
-            >
-                <div className='checkbox'>
-                    <label>
-                        <input
-                            id={this.props.id}
-                            disabled={this.props.disabled}
-                            autoFocus={this.props.autoFocus}
-                            type='checkbox'
-                            checked={this.props.value}
-                            onChange={this.handleChange}
-                        />
-                        <span>{this.props.placeholder}</span>
-                    </label>
-                </div>
-            </Setting>
-        );
-    }
-}
+export default React.memo(BoolSetting);