[useSearchParams] Functional updates for state

[fenok]

The useSearchParams hook supports functional updates for search params. It feels like there should be parity between search params and state in this regard, so we can do something like this:

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form.
    let params = serializeFormQuery(event.target);
    setSearchParams(
      (prevParams) => {
        prevParams.set("searchParam", params.searchParam);
        return params;
      },
      {
        state: (prevState) => {
          // Only add this one param to state, preserving the rest of it if we can.
          return appendToState(prevState, params.stateParam);
        },
      }
    );
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}