[Bug]: useLocation causes rerenders, memoization impossible because of context.

[DesertStrom16]

What version of React Router are you using?

6.8.0

Steps to Reproduce

Add a useLocation hook to any component, then watch for re-renders with your tool of choice (Why-Did-You-Render in my case).

Expected Behavior

useLocation causes a re-render only when the location has changed.

Actual Behavior

Component re-renders (more than once, meaning not related to Strict Mode) even when location has not changed.

If this is unavoidable with Context, meaning we as developers cannot memoize, as well as the developers of this library cannot memoize, does that mean the only option left is to go old school with an event listener?

Thanks.

[timdorr]

Can you give an example of this? Location has its own specific context, so it only updates when the location changes. Even if the pathname doesn't change, if you're triggering something that's causing another property of the location to change, that still will trigger a rerender (which is the correct behavior).

[process0]

This is a known bug with no official fix #7634

[sahilanguralla]

+1 to this issue. We are seeing unnecessary re-renders in our app because some part of the location changed, even though the part that a given component was using has not changed.

Having a Redux-like location selector function would be helpful here.

const isMyPath = useLocationSelector((location) => location.pathname.includes('/my-path'));

And re-rendering can be avoided if the function's return value has not changed.