Is it normal for useParams to return twice when navigating to a different URL?

[reorx]

Here's a demo on CSB:
https://codesandbox.io/p/devbox/remix-useparams-dk8n2q?file=%2Fapp%2Froutes%2Fitems.%24id.tsx%3A4%2C5-4%2C31

When clicking on /items/aa from /items/bb, const params = useParams() first returns {"id": "aa"} and then {"id": "bb"}. I believe this behavior is not ideal, as it will cause the sub-page to render /items/aa again. In some cases, this may lead to problems such as unexpected useEffect executions.

However, useLocation() returns only once. I have to manually parse the parameters from useLocation to avoid the problems associated with useParams.

[sergiodxa]

The problem is you're logging on render, and because useParams reads from the router single context, any internal state change in the route will cause a new render.

When you navigate from /items/aa to /items/bb the navigation.state change from idle to loading to idle again, when going to load the params value is still aa so you get a new render with that value.

This is usually not an issue, if you use an effect that depends on the param value you can grab exactly that param, that way unless the string change the effect won't run again, e.g.

let id = useParams().id
useEffect(() => {
  console.log({ id })
}, [id])

That effect will only run after the id actually change from aa to bb or from bb to aa.

[reorx]

Thanks for explaining. I understand that this happens because the internal navigation state has different stages (somewhat like react-query). That makes sense, but I still have the following two questions:

1. When navigating from /items to /items/bb, the log only prints once for {"id": "bb"}. This is why I expected the same behavior when navigating from /items/aa to /items/bb initially. Why is the behavior inconsistent?
2. Why is useLocation not affected by the navigation state's lifecycle? If they are using different states under the hood, why not unify their implementation? I think location and params are at the same level from a higher perspective.

[sergiodxa]

1. When navigating from /items to /items/bb, the log only prints once for {"id": "bb"}. This is why I expected the same behavior when navigating from /items/aa to /items/bb initially. Why is the behavior inconsistent?

The log in in routes/items.$id and that route is not mounted until you navigate to /items/aa or /items/bb, at that point the navigation state is already idle, meanwhile when going from aa to bb the route is already mounted so you get a re-render.

2. Why is useLocation not affected by the navigation state's lifecycle? If they are using different states under the hood, why not unify their implementation? I think location and params are at the same level from a higher perspective.

If you don't have a loader the navigation from /items/aa to /items/bb is immediate (it doesn't even need to load more code since all the code is already loaded) so when React Router does a state change to go from idle to loading to idle again React is batching the renders and going from idle to idle, that's why you don't see the navigation.state changing.

If added a simple loader to both routes/items and routes/items.$id to add a delay.

export async function loader() {
  await new Promise((r) => setTimeout(r, 1000));
  return null;
}

Then in the first one I added these logs:

console.group("routes/items");
console.log("navigation.state", useNavigation().state);
console.groupEnd();

And in the second I added these logs:

console.group("routes/items.$id");
console.log("params.id", params.id);
console.log("navigation.state", useNavigation().state);
console.groupEnd();

And this is what I see going from / to /items:

This is when going from /items to /items/aa:

This is when going from /items/aa to /items/bb:

I'm not completely sure why there are two groups of routes/items.$id with state being loading but you can see that is only after the navigate.state is idle that params.id is bb.

[reorx]

I'm not completely sure why there are two groups of routes/items.$id with state being loading

I tried your code, and found that if remove console.log("params.id", params.id) and useParams() from the second, the group routes/items.$id will only have one state being loading.:

I believe this clearly demonstrates that useParams employs a different approach compared to navigation state, causing React to render an extra time. Understanding exactly what happens and why might require a deep dive into the underlying source code. Let's see if anyone can provide further insights.

Regardless, I was able to solve my original problem by using the useEffect hook as you suggested. Your explanation was incredibly detailed—thank you! It was a pleasure discussing this with you. I learned a lot!