Persisting defaultValue in the URL on Mount

[isBatak]

I have a question about persisting defaultValue in the URL when the component mounts.

Here's an example:

const [search] = useQueryState('search', { defaultValue: 'test' });

I would like this to automatically reflect the default value in the URL on mount,
like this:
http://example.com?search=test

From the documentation, I noticed this note:

The default value is internal to React, it will not be written to the URL unless you set it explicitly and use the clearOnDefault: false option.

I’m curious about what was meant by "unless you set it explicitly".
Does this mean there's a specific implementation or pattern I can follow to ensure the defaultValue is written to the URL on mount?
If so, could you provide an example?

[franky47]

This sounds like the description of a side-effect (updating the URL after mounting), so a good old useEffect might be in order:

const defaultValue = 'test'
const [state, setState] = useQueryState('search', parseAsString.withDefault(defaultValue).withOptions({ clearOnDefault: false })
useEffect(() => {
  if (state !== defaultValue) {
    return
  }
  setState(defaultValue)
}, [])

We can probably get away with an empty dependency array here if defaultValue is stable (eg: defined at the top level), as we're only interested in the first state on mount, and not to react to updates.

[isBatak]

Isn't this suboptimal?
This will trigger another render after the first mount.

What would happen with useEffect approach if I encapsulate it in useSearchParam custom hook?

const defaultValue = 'test';

const useSearchParam = () => {
  const [state, setState] = useQueryState('search', parseAsString.withDefault(defaultValue).withOptions({ clearOnDefault: false })
  useEffect(() => {
    if (state !== defaultValue) {
      return;
    }
    setState(defaultValue);
  }, [])

  return [state, setState];
}

// <ComponenOne />
const [state, setState] = useSearchParam();

// <ComponentTwo />
const [state, setState] = useSearchParam(); // this useEffect will be triggered again and cause another update

Is there a way to sync default value internally without triggering a render?

const [state, setState] = useQueryState('search', parseAsString.withDefault(defaultValue).withOptions({ clearOnDefault: false, syncDefaultValue: true })

React docs suggests different approach https://react.dev/learn/you-might-not-need-an-effect#:~:text=Start%20by%20deleting%20the%20Effect.%20Instead%2C%20adjust%20the%20state%20directly%20during%20rendering%3A

const defaultValue = 'test'
const [state, setState] = useQueryState('search', parseAsString.withOptions({ clearOnDefault: false })

if (state === null) {
    setState(defaultValue)
}

This should break the current render and start again. I tried this but it didn't work as expected.

Suggestion: Can withDefault accept lazy init function similar to useState?
Something like this:

const [state. setState] = useState(() => getDefaultValue());
const [state. setState] = useQueryState('search', parseAsString.withDefault(() => getDefaultValue()));

This lazy init function should be called internally only when there is no search param in the URL, and in theory it can silently update the URL.
The problem that it solves is that getDefaultValue can be heavy compute function, for example it can read form LocalStorage and do Zod parsing, it's wasteful to run it on each subsequent state update.

[franky47]

This should break the current render and start again. I tried this but it didn't work as expected.

That's because updating the URL is an asynchronous operation (not in the async/await way, but sending a message to the browser, which will do so outside of the JavaScript event loop).

Having a function for the default value was something I had put in the roadmap a while back, but hadn't given any thought in a while. It would definitely enable powerful new features (like loading defaults from localStorage, which is synchronous), but running effects there would still be highly unrecommended, the same way as running effects in a useEffect initialisation function breaks the rules of React.