---

This section details on the original issue you should resolve

<issue_title>[P0] Memoize withRouterHooks HOC (params/location stability)</issue_title>
<issue_description>## Summary

Stabilize object references from useParams() and useLocation() in withRouterHooks HOC. This is a P0 critical fix required to break the global re-render cascade.

Parent Epic: #6669 — Break Global Re-render Cascade

Problem

withRouterHooks HOC passes useParams() and useLocation() results directly to wrapped components. These hooks return new object references on every render even when the values are identical, breaking React.memo and causing cascade re-renders.

WDYR Analysis shows:

• props.params flagged as "different objects that are equal by value"
• This triggers on ~40 components per cascade cycle
• Multiple cascade cycles per user action (5+)

Current Code

// ui/helpers/higher-order-components/with-router/with-router.component.js
const ComponentWithRouterHooks = (props) => {
  const hookNavigate = useNavigate();
  const hookLocation = useLocation();
  const hookParams = useParams();

  return (
    <WrappedComponent
      navigate={props.navigate ?? hookNavigate}
      location={props.location ?? hookLocation}
      params={props.params ?? hookParams}  // New object every render!
    />
  );
};

Solution

Memoize router props to maintain stable references:

import { useMemo } from 'react';

const ComponentWithRouterHooks = (props) => {
  const hookNavigate = useNavigate();
  const hookLocation = useLocation();
  const hookParams = useParams();

  // Stabilize params object
  const stableParams = useMemo(
    () => props.params ?? hookParams,
    [props.params, JSON.stringify(hookParams)],
  );

  // Stabilize location object
  const stableLocation = useMemo(
    () => props.location ?? hookLocation,
    [
      props.location,
      hookLocation.pathname,
      hookLocation.search,
      hookLocation.hash,
      hookLocation.state,
    ],
  );

  return (
    <WrappedComponent
      {...props}
      navigate={props.navigate ?? hookNavigate}
      location={stableLocation}
      params={stableParams}
    />
  );
};

Files

• ui/helpers/higher-order-components/with-router/with-router.component.js

Acceptance Criteria

• params and location props maintain stable references when values unchanged
• Unit tests verify memoization works correctly
• No regression in routing behavior
• WDYR no longer flags "different objects that are equal by value" for params/location

Estimated Effort

2 hours

Labels

perf, HOC, P0, team-extension-platform</issue_description>

Comments on the Issue (you are @copilot in this section)