From 0b1af4fdcb106124caa3f98b725f8c0f9a43dcfc Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Wed, 11 Mar 2026 09:36:20 -0700
Subject: [PATCH] fix(react-router): add useCallback to HashRouter and
 MemoryRouter for consistency with BrowserRouter

---
 .../src/ReactRouter/IonReactHashRouter.tsx         | 14 +++++++-------
 .../src/ReactRouter/IonReactMemoryRouter.tsx       | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

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 <IonRouter registerHistoryListener={registerHistoryListener}>{children}</IonRouter>;
 };
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 <IonRouter registerHistoryListener={registerHistoryListener}>{children}</IonRouter>;
 };