Synchronize Search Params and Controlled Inputs

[dvnrsn]

I've come to this section in the docs a few times in my adventures with Remix and I think there is a problem with the approaches to syncing inputs with search params.

My conclusion: there is no immediately reasonable way to update search params + state from clickable inputs (checkbox, radio)

First Choice: The simplest thing is to auto-submit the form when the user clicks the checkbox:

The problem here is the delay with the loaders running:

1. User clicks checkbox
2. Form submits
3. Loaders run
4. UI is updated

There is a significant delay when the loaders are running. The delay is bad enough that the Hydrogen team wrote logic to use the navigation.location.search instead of relying on active searchParams.

The second choice is decent but doesn't actually change the URLSearchParams when the user changes the input 🤔

I think the only option left is to use logic to set the search params yourself, but then we're dependent on setSearchParams() which fires the loaders or a custom mechanism for simply replacing state (not pushing to history)

[sergiodxa]

Instead of waiting for the search params to update, use the useDeferredValue hook to keep a state (used to render UI) and search params in sync without blocking the UI. The example in React docs is exactly about this case.

function Component() {
  let [state, setState] = useState(""); // The state
  let deferredState = useDeferredValue(state); // Deferred to prevent blocking the render
  let [, setSearchParams] = useSearchParams(); // Get the function to update the search params

  useEffect(() => {
    setSearchParams(param => {
      params.set("key", deferredState) // update search params using the deferred state
      return params;
    });
  }, [deferredState]);

  // The UI only uses the state, not the deferred state or the search params
  return <input value={state} onChange={event => setState(event.currentTarget.value)} />
}

[dvnrsn]

I don't see how this is practically any different. The render is not blocked

function Component() {
  let [state, setState] = useState(""); // The state
  let [, setSearchParams] = useSearchParams(); // Get the function to update the search params

  useEffect(() => {
    setSearchParams(param => {
      params.set("key", state)
      return params;
    });
  }, [state]);

  // The UI only uses the state, not the deferred state or the search params
  return <input value={state} onChange={event => setState(event.currentTarget.value)} />
}

[dvnrsn]

I was slightly in favor of having one source of truth (the query string) and I think it'd be cool if Remix could support such a thing so that we don't have local state that needs to initialize with query string value but then also update query string as an after thought

[dvnrsn]

Also, why hasn't a synchronous history replacement strategy made its way into the framework? Am I a weirdo with this edge case?useUpdateQueryStringValueWithoutNavigation