[8.18] [Security Solution] Fix redux action being fired because of unused react-router value (elastic#217055) (elastic#218454)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Security Solution] Fix redux action being fired because of unused
react-router value
(elastic#217055)](elastic#217055)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Kevin
Qualters","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-16T14:13:44Z","message":"[Security
Solution] Fix redux action being fired because of unused react-router
value (elastic#217055)\n\n## Summary\n\nThis pr fixes a bug with the
RouteCapture component, used at a high\nlevel in the security solution
component tree, to reflect url changes\ninto redux. The code previously
used the full result of\n'react-router-dom' 's useLocation hook as the
payload, which contains 4\nparameters, pathname, search, hash that we
make use of, and a 4th that\nwas added sometime later by the library
that is essentially a random id\ngenerated every time the hook is
called, called key. We have never used\nthis, and it was being
inadvertently copied into the redux state, and\nalso causing some other
actions or hooks based listeners to run I think\nas well.\n\nBelow is
the contrived example of going from the home page to an empty\nalerts
page, and you can see 4 actions in the after, and 5 in the\nbefore, with
1 updating only the key. May reduce more unneeded actions\nwith more
going on in the page, but exactly how many is not
known.\nBefore:\n\n![image](https://github.com/user-attachments/assets/93cc2c5a-56e4-4764-8791-c41879fd5b45)\n\n\nAfter:\n\n![image](https://github.com/user-attachments/assets/ebd75055-4e17-497b-bed2-a5fd58c5c92f)\n\n\n###
Checklist\n\n- [ ] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios","sha":"c277812ffe3e74eb9bc0733a538bd78ea9b95f58","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting:Investigations","backport:all-open","v9.1.0"],"title":"[Security
Solution] Fix redux action being fired because of unused react-router
value","number":217055,"url":"https://github.com/elastic/kibana/pull/217055","mergeCommit":{"message":"[Security
Solution] Fix redux action being fired because of unused react-router
value (elastic#217055)\n\n## Summary\n\nThis pr fixes a bug with the
RouteCapture component, used at a high\nlevel in the security solution
component tree, to reflect url changes\ninto redux. The code previously
used the full result of\n'react-router-dom' 's useLocation hook as the
payload, which contains 4\nparameters, pathname, search, hash that we
make use of, and a 4th that\nwas added sometime later by the library
that is essentially a random id\ngenerated every time the hook is
called, called key. We have never used\nthis, and it was being
inadvertently copied into the redux state, and\nalso causing some other
actions or hooks based listeners to run I think\nas well.\n\nBelow is
the contrived example of going from the home page to an empty\nalerts
page, and you can see 4 actions in the after, and 5 in the\nbefore, with
1 updating only the key. May reduce more unneeded actions\nwith more
going on in the page, but exactly how many is not
known.\nBefore:\n\n![image](https://github.com/user-attachments/assets/93cc2c5a-56e4-4764-8791-c41879fd5b45)\n\n\nAfter:\n\n![image](https://github.com/user-attachments/assets/ebd75055-4e17-497b-bed2-a5fd58c5c92f)\n\n\n###
Checklist\n\n- [ ] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios","sha":"c277812ffe3e74eb9bc0733a538bd78ea9b95f58"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217055","number":217055,"mergeCommit":{"message":"[Security
Solution] Fix redux action being fired because of unused react-router
value (elastic#217055)\n\n## Summary\n\nThis pr fixes a bug with the
RouteCapture component, used at a high\nlevel in the security solution
component tree, to reflect url changes\ninto redux. The code previously
used the full result of\n'react-router-dom' 's useLocation hook as the
payload, which contains 4\nparameters, pathname, search, hash that we
make use of, and a 4th that\nwas added sometime later by the library
that is essentially a random id\ngenerated every time the hook is
called, called key. We have never used\nthis, and it was being
inadvertently copied into the redux state, and\nalso causing some other
actions or hooks based listeners to run I think\nas well.\n\nBelow is
the contrived example of going from the home page to an empty\nalerts
page, and you can see 4 actions in the after, and 5 in the\nbefore, with
1 updating only the key. May reduce more unneeded actions\nwith more
going on in the page, but exactly how many is not
known.\nBefore:\n\n![image](https://github.com/user-attachments/assets/93cc2c5a-56e4-4764-8791-c41879fd5b45)\n\n\nAfter:\n\n![image](https://github.com/user-attachments/assets/ebd75055-4e17-497b-bed2-a5fd58c5c92f)\n\n\n###
Checklist\n\n- [ ] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios","sha":"c277812ffe3e74eb9bc0733a538bd78ea9b95f58"}}]}]
BACKPORT-->

Co-authored-by: Kevin Qualters <[email protected]>

Author: kibanamachine

x-pack/solutions/security/plugins/security_solution/common/endpoint/types/index.ts

@@ -50,7 +50,6 @@ export interface AppLocation {
   pathname: string;
   search: string;
   hash: string;
-  key?: string;
   state?:
     | {
         isTabChange?: boolean;

x-pack/solutions/security/plugins/security_solution/public/common/components/endpoint/route_capture.tsx

@@ -6,28 +6,31 @@
  */
 
 import type { PropsWithChildren } from 'react';
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { TimelineId } from '../../../../common/types';
-import type { AppLocation } from '../../../../common/endpoint/types';
 import { timelineActions } from '../../../timelines/store';
 
 /**
  * This component should be used above all routes, but below the Provider.
  * It dispatches actions when the URL is changed.
  */
 export const RouteCapture = memo<PropsWithChildren<unknown>>(({ children }) => {
-  const location: AppLocation = useLocation();
+  const { pathname, search, hash, state } = useLocation();
   const dispatch = useDispatch();
+  const relevantUrlParams = useMemo(
+    () => ({ pathname, search, hash, state }),
+    [pathname, search, hash, state]
+  );
 
   useEffect(() => {
     dispatch(timelineActions.showTimeline({ id: TimelineId.active, show: false }));
-  }, [dispatch, location.pathname]);
+  }, [dispatch, relevantUrlParams.pathname]);
 
   useEffect(() => {
-    dispatch({ type: 'userChangedUrl', payload: location });
-  });
+    dispatch({ type: 'userChangedUrl', payload: relevantUrlParams });
+  }, [dispatch, relevantUrlParams]);
 
   return <>{children}</>;
 });