Skip to content

Commit c277812

Browse files
[Security Solution] Fix redux action being fired because of unused react-router value (#217055)
## Summary This pr fixes a bug with the RouteCapture component, used at a high level in the security solution component tree, to reflect url changes into redux. The code previously used the full result of 'react-router-dom' 's useLocation hook as the payload, which contains 4 parameters, pathname, search, hash that we make use of, and a 4th that was added sometime later by the library that is essentially a random id generated every time the hook is called, called key. We have never used this, and it was being inadvertently copied into the redux state, and also causing some other actions or hooks based listeners to run I think as well. Below is the contrived example of going from the home page to an empty alerts page, and you can see 4 actions in the after, and 5 in the before, with 1 updating only the key. May reduce more unneeded actions with more going on in the page, but exactly how many is not known. Before: ![image](https://github.com/user-attachments/assets/93cc2c5a-56e4-4764-8791-c41879fd5b45) After: ![image](https://github.com/user-attachments/assets/ebd75055-4e17-497b-bed2-a5fd58c5c92f) ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
1 parent f00f837 commit c277812

File tree

2 files changed

+9
-7
lines changed
  • x-pack/solutions/security/plugins/security_solution

2 files changed

+9
-7
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export interface AppLocation {
5050
pathname: string;
5151
search: string;
5252
hash: string;
53-
key?: string;
5453
state?:
5554
| {
5655
isTabChange?: boolean;

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,31 @@
66
*/
77

88
import type { PropsWithChildren } from 'react';
9-
import React, { memo, useEffect } from 'react';
9+
import React, { memo, useEffect, useMemo } from 'react';
1010
import { useLocation } from 'react-router-dom';
1111
import { useDispatch } from 'react-redux';
1212
import { TimelineId } from '../../../../common/types';
13-
import type { AppLocation } from '../../../../common/endpoint/types';
1413
import { timelineActions } from '../../../timelines/store';
1514

1615
/**
1716
* This component should be used above all routes, but below the Provider.
1817
* It dispatches actions when the URL is changed.
1918
*/
2019
export const RouteCapture = memo<PropsWithChildren<unknown>>(({ children }) => {
21-
const location: AppLocation = useLocation();
20+
const { pathname, search, hash, state } = useLocation();
2221
const dispatch = useDispatch();
22+
const relevantUrlParams = useMemo(
23+
() => ({ pathname, search, hash, state }),
24+
[pathname, search, hash, state]
25+
);
2326

2427
useEffect(() => {
2528
dispatch(timelineActions.showTimeline({ id: TimelineId.active, show: false }));
26-
}, [dispatch, location.pathname]);
29+
}, [dispatch, relevantUrlParams.pathname]);
2730

2831
useEffect(() => {
29-
dispatch({ type: 'userChangedUrl', payload: location });
30-
});
32+
dispatch({ type: 'userChangedUrl', payload: relevantUrlParams });
33+
}, [dispatch, relevantUrlParams]);
3134

3235
return <>{children}</>;
3336
});

0 commit comments

Comments
 (0)