Best way to sync state with URL

[MartinCura]

Hi there! Beautiful library you're building, been trying it for months, slowly evaluating places where it can replace RHF for me.

I have a search page with filters which i sync with query params in the URL using nuqs. In Next.js/React i'm doing (simplified)...

const [filters, setFilters] = nuqs.useQueryStates(filtersParams, {
  shallow: false,
  urlKeys: FILTERS_URL_KEYS,
  startTransition,
})

const form = useForm({
  ...searchFormOpts,
  defaultValues: {
    ...searchFormOpts.defaultValues,
    ...filters,
  },
  onSubmit: async ({ value }) => {
    setFilters(value)
  },
})

This works quite well, except that if the user dirties the form and then a filter is modified elsewhere, the state won't find out (because of the initial value for the internal useState, i guess). Example: page loads, modify min price filter, delete a different filter from a different part of the page (which removes that query param), notice that filter is still active in my form.

I just solved this by adding:

  // Force form to use updated filters from query params; i'll ask if there's something better
  useEffect(() => {
    form.reset()
  }, [filters, form])

So this seems to work, but still i felt worth it to ask if there's something better here. For example in RHF you could switch from prop defaultValues: to values: (though i'm not saying that's the better solution).

In general i'm also asking if there's something dumber even simpler to do when i actually want the state to be sourced from the URL query params (+ defaults), but still benefit from tanstack form's other features.