---
title: "useLocationSelector – Browser Hook Usage & Examples"
description: "Selectively retrieve properties from location. This hook will only re-render when the value you return is changed. For more information, [see](https://thisweeki"
canonical: https://reactuse.com/browser/uselocationselector/
---

# useLocationSelector

Selectively retrieve properties from location. This hook will only re-render when the value you return is changed.
For more information, [see](https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api)

`useLocationSelector` uses [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore) to subscribe to `window.location` changes and lets you extract only the part of the location you care about via a selector function. The component re-renders only when the selected value actually changes, preventing unnecessary updates when other location properties change (e.g., hash changes won't re-render a component that only selects `pathname`).

### When to Use

- Reading the current pathname, hash, or search params without importing a full routing library
- Optimizing performance by subscribing to only the specific location property your component needs
- Building lightweight navigation-aware components that respond to URL changes

### Notes

- **SSR-safe**: Accepts a `fallback` parameter that is returned during server-side rendering when `window.location` is not available.
- **Selective re-renders**: Unlike reading `window.location` directly, the selector pattern ensures your component only re-renders when the derived value changes.
- **Browser events**: Listens to `popstate` events on `window` to detect back/forward navigation. Hash changes and `pushState`/`replaceState` calls are also tracked.

## Usage

```tsx live noInline
function CurrentPathname() {
  const pathname = useLocationSelector(location => location.pathname);
  const ref = useRef(0);

  useEffect(() => {
    ref.current = ref.current + 1;
  });
  return (
    <div>
      {pathname}
      <div>renderCount: {ref.current}</div>
    </div>
  );
}

function CurrentHash() {
  const hash = useLocationSelector(location => location.hash || "nohash");
  const ref = useRef(0);

  useEffect(() => {
    ref.current = ref.current + 1;
  });
  return (
    <div>
      {hash}
      <div>hashRender: {ref.current}</div>
    </div>
  );
};

function Links() {
  return (
    <div>
      <a href="#link1">#link1</a>
      <a href="#link2">#link2</a>
      <a href="#link3">#link3</a>
    </div>
  );
};

function Demo() {
  return (
    <div>
      <CurrentPathname />
      <CurrentHash />
      <Links />
    </div>
  );
};

render(<Demo/>);

```

%%API%%