[Docs/Question/Bug]: Re-renders on location.key change

[igorsantos07]

I'm not sure if this is a docs request, a question, or a bug report, so I apologize in advance 😅

I'm having a re-render issue that, after a log of search, profiling, then docs digging and googling on the best solution besides my weird one, I found that someone else had the same issue and solution. So I wonder:

• what's location.key exactly for? Should this be in the docs? If we go to location, all it says is its shape; while most are obvious, the key isn't really... I understand it seems to come from the history package, but when you're implementing the Router you may not realize you should look for two different sets of docs, so maybe add a link or a simple description there?
• is it expected to have re-renders of the same Route component when location "changes to the same place"? In my situation, I have a menu with, say, <NavLink to="/orders"> that re-renders the selected route with every click, even if the current route is exactly that. It seems to happen because of the location.key change.

[timdorr]

location.key is just a unique key for a location. If you have two locations with the same pathnames, searches, etc, then you can use key to tell them apart.

Also, the behavior you describe in your second bullet point has been "fixed" (changed, really) in 5.2.1: https://github.com/remix-run/react-router/releases/tag/v5.2.1

[igorsantos07]

Hmmm interesting. I'll try upgrading then and see if it "fixes"!

[igorsantos07]

Well, while it seems to be related indeed, the issue persisted. Clicking twice in the same NavLink causes the Route to re-render because location changed. I'm currently at 5.2.1, with react-router-dom 5.3.0.

Using a custom Route element (with React.memo and a custom comparator), I can see that indeed what changes is the key.

I'm using BrowserHistory, if that makes any difference... Should I open an issue? Maybe try to reproduce this in an isolated codepen? Or am I just being stupid? 😅

[igorsantos07]

@timdorr This was originally an issue (with questions, indeed), that got turned into a discussion, but really looks like a bug (or unexpected behavior, at least). Should we turn it back into an issue?

[derekrprice]

We are seeing a similar issue with re-sizing the viewport. We get a new location.key for some reason, though I can't see a good reason for the history entry. I don't think the user would expect the back button to restore the previous browser window size. We are still using react-router 5.1.2, so I'll let you know what happens after upgrade to 5.2.1+.

[derekrprice]

No dice here. 5.2.1 has the same problem when re-sizing the viewport.

[ManishaChhibber]

I am using connected-react-router: 6.4.0 but still have have the issue where the keys are changing for the same path that is causing re-rendering of component.