From 75b9f71d45c0441aa9cf0eb285d869a662a1c5fe Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 4 Jan 2022 19:19:06 -0330
Subject: [PATCH] Remove unnecessary `mounted` state from Home component
 (#13202)

The `mounted` state was used to derive state from props before the
first render of the Home component. Instead this state is now derived
in the constructor, which is also run before the first render. This
should behave exactly the same, except now we don't need the `mounted`
state or the `deriveStateFromProps` function anymore.

The call to `closeCurrentWindow` that was made in `componentDidUpdate`
has been moved to the constructor as well. There is no need to delay
that call, and this saves us from having to compare current with
previous state in that lifecycle function.
---
 ui/pages/home/home.component.js | 79 +++++++++++++++------------------
 1 file changed, 36 insertions(+), 43 deletions(-)

diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index c9c03aa646bc..be873b75b433 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -97,11 +97,44 @@ export default class Home extends PureComponent {
   };
 
   state = {
-    // eslint-disable-next-line react/no-unused-state
-    mounted: false,
     canShowBlockageNotification: true,
+    closing: false,
+    redirecting: false,
   };
 
+  constructor(props) {
+    super(props);
+
+    const {
+      firstPermissionsRequestId,
+      haveSwapsQuotes,
+      isNotification,
+      isSigningQRHardwareTransaction,
+      showAwaitingSwapScreen,
+      suggestedAssets = [],
+      swapsFetchParams,
+      totalUnapprovedCount,
+      unconfirmedTransactionsCount,
+    } = this.props;
+
+    if (
+      isNotification &&
+      totalUnapprovedCount === 0 &&
+      !isSigningQRHardwareTransaction
+    ) {
+      this.state.closing = true;
+      global.platform.closeCurrentWindow();
+    } else if (
+      firstPermissionsRequestId ||
+      unconfirmedTransactionsCount > 0 ||
+      suggestedAssets.length > 0 ||
+      (!isNotification &&
+        (showAwaitingSwapScreen || haveSwapsQuotes || swapsFetchParams))
+    ) {
+      this.state.redirecting = true;
+    }
+  }
+
   checkStatusAndNavigate() {
     const {
       firstPermissionsRequestId,
@@ -140,46 +173,10 @@ export default class Home extends PureComponent {
   }
 
   componentDidMount() {
-    // eslint-disable-next-line react/no-unused-state
-    this.setState({ mounted: true });
     this.checkStatusAndNavigate();
   }
 
-  static getDerivedStateFromProps(
-    {
-      firstPermissionsRequestId,
-      isNotification,
-      suggestedAssets,
-      totalUnapprovedCount,
-      unconfirmedTransactionsCount,
-      haveSwapsQuotes,
-      showAwaitingSwapScreen,
-      swapsFetchParams,
-      isSigningQRHardwareTransaction,
-    },
-    { mounted },
-  ) {
-    if (!mounted) {
-      if (
-        isNotification &&
-        totalUnapprovedCount === 0 &&
-        !isSigningQRHardwareTransaction
-      ) {
-        return { closing: true };
-      } else if (
-        firstPermissionsRequestId ||
-        unconfirmedTransactionsCount > 0 ||
-        suggestedAssets.length > 0 ||
-        (!isNotification &&
-          (showAwaitingSwapScreen || haveSwapsQuotes || swapsFetchParams))
-      ) {
-        return { redirecting: true };
-      }
-    }
-    return null;
-  }
-
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate() {
     const {
       setupThreeBox,
       showRestorePrompt,
@@ -188,10 +185,6 @@ export default class Home extends PureComponent {
       isNotification,
     } = this.props;
 
-    if (!prevState.closing && this.state.closing) {
-      global.platform.closeCurrentWindow();
-    }
-
     isNotification && this.checkStatusAndNavigate();
 
     if (threeBoxSynced && showRestorePrompt && threeBoxLastUpdated === null) {