Internal state not reflecting actual state of query params after route change

[keeganpotgieter]

Context

What's your version of nuqs?

"nuqs": "^2.3.0"

What framework are you using?

• ✅ React Router

Which version of your framework are you using?

"react-router-dom": "^6.28.1"

Description

The internal state of nuqs id not reflecting the actual state of query params after route change

Reproduction

export const useOrderFilters = ({ orderType}) => {
  const keyMap = React.useMemo(() => {
    const today = new Date();
    const DEFAULT_FROM_DATE = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()).getTime();
    const DEFAULT_TO_DATE = new Date().getTime();

    const isHistoric = orderType === 'historic';

    return {
      search: parseAsString.withDefault(''),
      ...(!isHistoric && { status: parseAsStringLiteral(CURRENT_ORDERS_FILTERS).withDefault('') }),
      ...(isHistoric && { fromDate: parseAsOptionalDate.withDefault(DEFAULT_FROM_DATE) }),
      ...(isHistoric && { toDate: parseAsOptionalDate.withDefault(DEFAULT_TO_DATE) }),
    };
  }, [orderType]);

  return useQueryStates(keyMap, { clearOnDefault: false });
};

<Route path="orders" element={<Layout />}>
        <Route index element={<OrdersPage tab="current" />} />
        <Route path="/history" element={<OrdersPage tab="historic" />} />
</Route>

export const OrdersPage = ({ tab }) => {
  const [orderType, setOrderType] = useQueryState(
    'type',
    parseAsStringEnum(['current', 'historic']).withDefault(tab ?? 'current'),
  );

  const [filters, setFilters] = useOrderFilters({ orderType });

  ....
}

When switching between /orders and /orders/history through react-router navigate, the filters will carry over.
E.g., Say we have search=bob when orderType is historical, and then we navigate, the url will not have any search params, but the search part of filters will remain the same.

[franky47]

I see you're using a dynamic keyMap, could you please give this preview version a try and let me know if it works better? See issue #565 for reference (and PR #858).

pnpm add https://pkg.pr.new/nuqs@858

[keeganpotgieter]

The issue still occurs with the preview version.
I moved to a dynamic key map to see if that could help clear the caching—the issue is still present when not using a dynamic key map.

Thanks

[keeganpotgieter]

Solved the issue by adding a key to the OrdersPage component.
Thanks

[franky47]

Could this have been a caching thing from React Router, of it reusing the component rather than unmounting/remounting (which would explain your fix)?

Even so, it feels like there is a bug here, if the state is out of sync with the URL.

I'll see if I can reproduce it, could you please confirm what the issue was that the search params in the URL were cleared by a manual call to navigate but the internal state remained?

[franky47]

I can't reproduce it in #863, could you please take a look at the test and see if it matches with the setup you had?