[Bug]: navigate(to, { replace: true }) causes re-render and infinite loops

[ryanmarshallmc]

What version of React Router are you using?

6.2.1

Steps to Reproduce

In a component rendered by a , I want to update the URL with search params based on component state to preserve values over refresh/other navigation.

IN INDEX.JS

<Route path="/component" element={<Component />} />

IN COMPONENT

function Component() {
...
  useEffect(() => {
      navigate(queryParams, { replace: true })
  }, [queryParams])
...
}

Expected Behavior

In previous versions of React Router, I have used history.replace() for this purpose, and that enables me to silently update the URL without causing a re-render and refetching data.

Actual Behavior

As the useEffect code is written above, an infinite loop is created, as the useEffect is run after navigate is called (I assume this is because the new URL triggers a fresh mount of the component). A hacky fix is to check if my new query params in state are equal to the current url query params, and only call navigate() if they are not. However, this still causes my component to fetch new data from other useEffects each time the query params change, which is not necessary and is expensive.

[ryanmarshallmc]

I am still new to the new <Routes><Route/></Routes> structure - could it be that I've set that up differently/incorrectly in a way that triggers a fresh child component mount/render when the query params change?

[mfpopa]

I think your problem is related to the fact that useNavigate causes a re-render every time the route changes. See #7634

[stereokai]

Have you ended up solving this?

[ErwinJapie]

I tried upgrading v5 to v6 today, but until this bug is fixed version 6 is hardly usuable... way too many rerenders due to this change.

[vicodinvic1]

the same issue v6.4.0

[vuhi]

same problem, not just query parameter, if you navigate to the same url, it still retenders

[josemlrod]

did you find a solution to this issue?