diff --git a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx
index a216ee60fb..2c34d9f36e 100644
--- a/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonReactHashRouter.tsx
@@ -5,7 +5,7 @@
import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
import type { PropsWithChildren } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
import type { HashRouterProps } from 'react-router-dom';
import { HashRouter, useLocation, useNavigationType } from 'react-router-dom';
@@ -17,9 +17,9 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
const historyListenHandler = useRef<(location: HistoryLocation, action: HistoryAction) => void>();
- const registerHistoryListener = (cb: (location: HistoryLocation, action: HistoryAction) => void) => {
+ const registerHistoryListener = useCallback((cb: (location: HistoryLocation, action: HistoryAction) => void) => {
historyListenHandler.current = cb;
- };
+ }, []);
/**
* Processes navigation changes within the application.
@@ -33,15 +33,15 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
* @param action The type of navigation action ('PUSH', 'POP', or
* 'REPLACE').
*/
- const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
+ const handleHistoryChange = useCallback((loc: HistoryLocation, act: HistoryAction) => {
if (historyListenHandler.current) {
- historyListenHandler.current(location, action);
+ historyListenHandler.current(loc, act);
}
- };
+ }, []);
useEffect(() => {
handleHistoryChange(location, navigationType);
- }, [location, navigationType]);
+ }, [location, navigationType, handleHistoryChange]);
return {children};
};
diff --git a/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx b/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx
index 8f2ff22989..2884a7bb73 100644
--- a/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx
@@ -6,7 +6,7 @@
import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
import type { PropsWithChildren } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
import type { MemoryRouterProps } from 'react-router';
import { MemoryRouter, useLocation, useNavigationType } from 'react-router';
@@ -18,9 +18,9 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
const historyListenHandler = useRef<(location: HistoryLocation, action: HistoryAction) => void>();
- const registerHistoryListener = (cb: (location: HistoryLocation, action: HistoryAction) => void) => {
+ const registerHistoryListener = useCallback((cb: (location: HistoryLocation, action: HistoryAction) => void) => {
historyListenHandler.current = cb;
- };
+ }, []);
/**
* Processes navigation changes within the application.
@@ -34,15 +34,15 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
* @param action The type of navigation action ('PUSH', 'POP', or
* 'REPLACE').
*/
- const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
+ const handleHistoryChange = useCallback((loc: HistoryLocation, act: HistoryAction) => {
if (historyListenHandler.current) {
- historyListenHandler.current(location, action);
+ historyListenHandler.current(loc, act);
}
- };
+ }, []);
useEffect(() => {
handleHistoryChange(location, navigationType);
- }, [location, navigationType]);
+ }, [location, navigationType, handleHistoryChange]);
return {children};
};