diff --git a/webapp/channels/src/components/discard_changes_modal.tsx b/webapp/channels/src/components/discard_changes_modal.tsx
index 90034daaa7..050f450327 100644
--- a/webapp/channels/src/components/discard_changes_modal.tsx
+++ b/webapp/channels/src/components/discard_changes_modal.tsx
@@ -12,45 +12,47 @@ type Props = {
     onCancel: (checked: boolean) => void;
 }
 
-export default class DiscardChangesModal extends React.PureComponent<Props> {
-    public render(): JSX.Element {
-        const title: JSX.Element = (
-            <FormattedMessage
-                id='discard_changes_modal.title'
-                defaultMessage='Discard Changes?'
-            />
-        );
+const DiscardChangesModal = ({
+    show,
+    onConfirm,
+    onCancel,
+}: Props) => {
+    const title = (
+        <FormattedMessage
+            id='discard_changes_modal.title'
+            defaultMessage='Discard Changes?'
+        />
+    );
 
-        const message: JSX.Element = (
-            <FormattedMessage
-                id='discard_changes_modal.message'
-                defaultMessage='You have unsaved changes, are you sure you want to discard them?'
-            />
-        );
+    const message = (
+        <FormattedMessage
+            id='discard_changes_modal.message'
+            defaultMessage='You have unsaved changes, are you sure you want to discard them?'
+        />
+    );
 
-        const buttonClass = 'btn btn-primary';
-        const button: JSX.Element = (
-            <FormattedMessage
-                id='discard_changes_modal.leave'
-                defaultMessage='Yes, Discard'
-            />
-        );
+    const buttonClass = 'btn btn-primary';
+    const button = (
+        <FormattedMessage
+            id='discard_changes_modal.leave'
+            defaultMessage='Yes, Discard'
+        />
+    );
 
-        const modalClass = 'discard-changes-modal';
+    const modalClass = 'discard-changes-modal';
 
-        const {show, onConfirm, onCancel} = this.props;
+    return (
+        <ConfirmModal
+            show={show}
+            title={title}
+            message={message}
+            modalClass={modalClass}
+            confirmButtonClass={buttonClass}
+            confirmButtonText={button}
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+        />
+    );
+};
 
-        return (
-            <ConfirmModal
-                show={show}
-                title={title}
-                message={message}
-                modalClass={modalClass}
-                confirmButtonClass={buttonClass}
-                confirmButtonText={button}
-                onConfirm={onConfirm}
-                onCancel={onCancel}
-            />
-        );
-    }
-}
+export default React.memo(DiscardChangesModal);