Remix - search params should not update before navigation completed

[overshom]

Context

What's your version of nuqs?

    "nuqs": "2.4.1",

What framework are you using?

• ✅ Remix

Which version of your framework are you using?

    "@remix-run/react": "^2.9.2",

Description

Search params are updated before navigation completed which causes irrelevant renders and effects which should not happen.

Expected behaviour - search params should update while navigation not complete.

Reproduction

Bug visible for a fraction of a second, but still very annoying and may cause bigger issues if useEffect relies on param value change.

Imagine this case:

• current search param ?category=all
• click on navigation link to somewhere, zero search params, page not rendered yet
• • 🔴 bug here because old page still rendered, and search params from nuqs are already updated to their empty or default values
• navigation complete, page rendered

  // use simple param
  const [immediateCategory, setCategory] = useQueryState(
    'category',
    parseAsString.withDefault('all'),
  );

  console.log(immediateCategory); // 🔴 see value resets to default when navigation started and page still mounted

  // step one - switch to `?category=red`
  // click link to navigate somewhere
  // 🔴 BUG - SomeLargeLayoutShiftComponent rendered because params updated to default value even though user did not navigate to "all" category, he just navigated to other page that has no search params at all
  return <div>
    {immediateCategory === 'all' && <SomeLargeLayoutShiftComponent />}
    <Link to="/some-page">some page</Link>
  </div>;

[overshom]

As a workaround, I created another hook to not update value until remix navigation completed.

import { useNavigation } from '@remix-run/react';

const useValueAfterNavigation = <T,>(value: T) => {
  const navigation = useNavigation();
  const ref = useRef(value);
  if (navigation.state === 'idle') {
    ref.current = value;
  }
  return ref.current;
};

And then use it like here:

  const [immediateCategory, setCategory] = useQueryState(
    'category',
    parseAsString.withDefault('all'),
  );
  const category = useValueAfterNavigation(immediateCategory);

This way category value does not jump between navigations and works fine when search param is updated.