[Feature]: usePathname Hook

[Lure5134]

What is the new or updated feature that you are suggesting?

A hook usePathname should be created.

Why should this feature be included?

Currently, the useNavigate hook triggers a rerender on any change to the state or SearchParams. useNavigate, however, only needs the path, but uses useLocation for it. It would therefore save performance if useNavigate did not render on every change. In general, usePathname would also be handy for various other use cases.

[Lure5134]

The same as #7875

[chaance]

What would you propose this looks like? A usePathname would still need access the location context internally, which is ultimately what would trigger the render you're concerned about. I'm not sure how we write a usePathname that doesn't depend on the history's location state in some way.

If you want the pathname in a component without worrying about the rest of the location, I imagine you'd need to do that with memo. I'd consider this a perf optimization as a matter of necessity, but not something we'd encourage as a general pattern.

function Parent() {
  let navigate = useNavigate()
  let { pathname } = useLocation();
  return <Child pathname={pathname} navigate={navigate} />
}

function Child_({ pathname, navigate }) {
  return null; // return whatever
}

// Child will not re-render if `location` changes
// (basename or pathname updating will still update navigate here)
// Move any perf bottlenecks into the child
const Child(Child_);