[Feature]: Performance problem with useNavigate

[cloudcode-hungary]

What version of React Router are you using?

6.4.1

Steps to Reproduce

The useNavigate hook causes a rerender of the components any time the url changes.

• I have a very render heavy component (https://mui.com/x/react-data-grid/)
• I need to pass an onRowClick handler which calls navigate() to the clicked row
• I have some other actions in the datagrid, like selecting a few rows and then opening a modal to do stuff -> which is also written to the url /path/to/list?modal_action=stuff&modal_id=1,2

Opening the modal lags very much, because the whole list is re-rendered through useNavigate() - as useNavigate gets updated when the query string changes.

Expected Behavior

I expect useNavigate not to change, it should remain stable and should not depend on the current url.
(I am not using any relative navigation, always absolute, so it really should not care about the current location).

Is it possible to get a stable alternative besides useNavigate() with limitations maybe like not supporting relative navigation, but performance benefits? Or is there any other workaround to this problem, like navigating through some browser API? If I call window.location.assign the page reloads.

Actual Behavior

useNavigate changes.

[cloudcode-hungary]

I have checked the deepest bottoms of the navigate function, and in the end it calls window.history.pushState().
But simply calling pushState does not rerender the components, the url changes but everything remains.

[brophdawg11]

useNavigate is unstable and must remain so in BrowserRouter in order to support relative routing.

#7634 and #9588 stabilized the identity of useNavigate when using RouterProvider (on v6.11.0 and later) so that is the recommended workaround.