useRouterQueryParam() instead of useRouter() for performance

[alex-statsig]

Problem

I've realized that most usages of useRouter() throughout my app are either router.push() or router.query.xyz. Components using this hook will rerender on any "navigation" (including pseudo-navigation where filters are encoded in the URL for example) due to the context change of useRouter() (useRouter is basically useContext(RouterContext) under the hood).

Request

I'm wondering if anyone has made a handy hook for accessing a router query param without rerendering on all route changes. It seems like it would be possible via subscribing to router events instead of using useRouter, but also feels like it should be provided by nextjs given how low-level any widespread it is.

One concern I have with doing it manually is potentially falling out of sync with the correct router params during transitions (ex. I think suspense is used during a page transition, and needs to rerender with the new router params before the global route updates).

Note: router.push() can be solved by using the static Router.push() instead

Example

Example current logic using useRouter() for pathname, which rerenders on any query param change:

export function useRouterPath(): string {
  const router = useRouter();
  return router.pathname;
}

Potential optimized version which only rerenders if pathname actually changes:

export function useRouterPath(): string {
  const [value, setValue] = useState(Router.pathname);
  useEffect(() => {
    Router.events.on('routeChangeStart', () => { // routeChangeStart and routeChangeComplete both will be wrong on some case
      setValue(Router.pathname);
    });
  }, []);
  return value;
}

However, it is broken as it doesn't get the "pending" router state, only the global state (which doesn't update until the new route is done being rendered)

[icyJoseph]

For completeness sake, in appDir, there's dedicated hooks for this:

• https://beta.nextjs.org/docs/api-reference/use-search-params
• https://beta.nextjs.org/docs/api-reference/use-router

For example the new use-router, doesn't include data, but only actions, such as push, replace, etc.

It'd be nice if they could bring in that appDir feature into the pages directory, but that'd be a breaking change I guess.

[alex-statsig]

This is interesting, I'll have to look more into this. It seems useSearchParams still runs into the issue that updating a single search param (ex. some filter on the page) will cause all other useSearchParams() hooks to rerender (rather than only ones subscribing to this particular param)

[icyJoseph]

Most likely. I do recall swr had something called, state with dependency tracking, which is what you'd be looking for here.

https://github.com/icyJoseph/state-with-deps

So one could make a hook that behaves as you want by piecing together state with dependency tracking and the router. Hopefully no subtle concurrent rendering issues are overlooked.

Edit

Although, I think we'd need to know the queries upfront... Mmm

[alex-statsig]

This is a pretty cool idea, but yeah getting the query params via useRouter to plug into that still causes the rerender. The best I can think of is a few providers at the top level for various query keys, but I'm not positive that would be in the same render. Anything else seems like it would need to trigger another setState, and thus a separate render.