fix: Update higher-order-components callbacks per react-perf's warnings (#31022)

## **Description**

Removes inline functions and objects that `eslint-plugin-react-perf` was
flagging as bad for perf.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31022?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Nothing should change

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: darkwing

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} />;
   }
 }
 

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 = {

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} />
   );
 }