diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -102,6 +102,7 @@
   +onChangeAccountPassword: (event: SyntheticEvent<HTMLInputElement>) => void,
   +hasPermissionForTab: (thread: ThreadInfo, tab: TabType) => boolean,
   +deleteThreadAction: () => Promise<LeaveThreadPayload>,
+  +onDelete: (event: SyntheticEvent<HTMLElement>) => void,
 };
 class ThreadSettingsModal extends React.PureComponent<Props> {
   nameInput: ?HTMLInputElement;
@@ -189,7 +190,7 @@
     if (this.props.currentTabType === 'delete') {
       buttons = (
         <Button
-          onClick={this.onDelete}
+          onClick={this.props.onDelete}
           variant="danger"
           disabled={inputDisabled}
         >
@@ -312,14 +313,6 @@
       throw e;
     }
   }
-
-  onDelete = (event: SyntheticEvent<HTMLElement>) => {
-    event.preventDefault();
-    this.props.dispatchActionPromise(
-      deleteThreadActionTypes,
-      this.props.deleteThreadAction(),
-    );
-  };
 }
 
 const deleteThreadLoadingStatusSelector = createLoadingStatusSelector(
@@ -472,6 +465,14 @@
       }
     }, [accountPassword, callDeleteThread, modalContext, threadInfo]);
 
+    const onDelete = React.useCallback(
+      (event: SyntheticEvent<HTMLElement>) => {
+        event.preventDefault();
+        dispatchActionPromise(deleteThreadActionTypes, deleteThreadAction());
+      },
+      [deleteThreadAction, dispatchActionPromise],
+    );
+
     if (!threadInfo) {
       return (
         <Modal onClose={modalContext.clearModal} name="Invalid thread">
@@ -510,6 +511,7 @@
         onChangeAccountPassword={onChangeAccountPassword}
         hasPermissionForTab={hasPermissionForTab}
         deleteThreadAction={deleteThreadAction}
+        onDelete={onDelete}
       />
     );
   },