From 0d39f07c26651758d583720612aaca8a160f63d0 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 14 Mar 2025 12:58:26 -0500
Subject: [PATCH] fix: Update higher-order-components callbacks per
 react-perf's warnings

---
 .../authenticated/authenticated.component.js              | 7 +++++--
 .../higher-order-components/feature-toggled-route.js      | 8 ++++++--
 .../initialized/initialized.component.js                  | 4 +++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/ui/helpers/higher-order-components/authenticated/authenticated.component.js b/ui/helpers/higher-order-components/authenticated/authenticated.component.js
index 600aed944705..4b26fe9167a2 100644
--- a/ui/helpers/higher-order-components/authenticated/authenticated.component.js
+++ b/ui/helpers/higher-order-components/authenticated/authenticated.component.js
@@ -3,15 +3,18 @@ import PropTypes from 'prop-types';
 import { Redirect, Route } from 'react-router-dom';
 import { UNLOCK_ROUTE, ONBOARDING_ROUTE } from '../../constants/routes';
 
+const OnboardingRoute = { pathname: ONBOARDING_ROUTE };
+const UnlockRoute = { pathname: UNLOCK_ROUTE };
+
 export default function Authenticated(props) {
   const { isUnlocked, completedOnboarding } = props;
   switch (true) {
     case isUnlocked && completedOnboarding:
       return <Route {...props} />;
     case !completedOnboarding:
-      return <Redirect to={{ pathname: ONBOARDING_ROUTE }} />;
+      return <Redirect to={OnboardingRoute} />;
     default:
-      return <Redirect to={{ pathname: UNLOCK_ROUTE }} />;
+      return <Redirect to={UnlockRoute} />;
   }
 }
 
diff --git a/ui/helpers/higher-order-components/feature-toggled-route.js b/ui/helpers/higher-order-components/feature-toggled-route.js
index 6d58b7d04936..a9f6b5b31998 100644
--- a/ui/helpers/higher-order-components/feature-toggled-route.js
+++ b/ui/helpers/higher-order-components/feature-toggled-route.js
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect, Route } from 'react-router-dom';
 
 export default function FeatureToggledRoute({ flag, redirectRoute, ...props }) {
+  const redirect = useMemo(
+    () => ({ pathname: redirectRoute }),
+    [redirectRoute],
+  );
   if (flag) {
     return <Route {...props} />;
   }
-  return <Redirect to={{ pathname: redirectRoute }} />;
+  return <Redirect to={redirect} />;
 }
 
 FeatureToggledRoute.propTypes = {
diff --git a/ui/helpers/higher-order-components/initialized/initialized.component.js b/ui/helpers/higher-order-components/initialized/initialized.component.js
index d19c2bcd37cd..44708c249a9c 100644
--- a/ui/helpers/higher-order-components/initialized/initialized.component.js
+++ b/ui/helpers/higher-order-components/initialized/initialized.component.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { Redirect, Route } from 'react-router-dom';
 import { ONBOARDING_ROUTE } from '../../constants/routes';
 
+const onboardingRoute = { pathname: ONBOARDING_ROUTE };
+
 export default function Initialized(props) {
   return props.completedOnboarding ? (
     <Route {...props} />
   ) : (
-    <Redirect to={{ pathname: ONBOARDING_ROUTE }} />
+    <Redirect to={onboardingRoute} />
   );
 }