Comment by franciscop

This is one of the things that bothered me the most from existing React libraries, if you wanted to update a single query parameter now you needed to do a lot of extra work. It bothered me so much I ended up making a library around this [1], where you can do just:

    // /some/path?name=Francisco
    const [name, setName] = useQuery("name");
    console.log(name);  // Francisco
    setName('whatever');

Here's a bit more complex example with a CodeSadnbox[2]:

    export default function SearchForm() {
      const [place, setPlace] = useQuery("place");
      const [max, setMax] = useQuery("max");

      return (
        <form>
          <header>
            <h1>Search Trips</h1>
            <p>Start planning your holidays on a budget</p>
          </header>
          <TextInput
            label="Location:"
            name="place"
            placeholder="Paris"
            onChange={setPlace}
            value={place}
          />
          <NumberInput
            label="Max Price ($):"
            name="max"
            placeholder="0"
            onChange={setMax}
            value={max}
          />
        </form>
      );
    }

[1] https://crossroad.page/

[2] https://codesandbox.io/p/sandbox/festive-murdock-1ctv6