Query Params syncronization

[MursalovAltun]

Wouldn't it be useful for many users of this library to have an ability to synchronize form's value with the query params. This is very useful when you have a form for filtering a list of data.

[Moshyfawn]

You can simply watch your form values in a headless component and update the URL as a side-effect inside useEffect accordingly.

const SyncDataUrl = () => {
  const data = useWatch()
  
  useEffect(() => {
    updateUrl(data)
  }, [data, updateUrl])
  
  return null
}

I doubt this feature is gonna be included out of the box, as it's out of the scope of this library.

[MursalovAltun]

Ye I know how to do this manually but it would be nice to have it out of the box in an additional library like an addon/plugin @hookform/devtools. Let's say @hookform/query-params.

Implementing it using watch doesn't seem to be correct because we also have to handle the default values in case if page is reloaded with some values in query params.

[Moshyfawn]

Syncing URL state with a form is basically a controlled input of sort. As the URL is the source of truth for the form's value, IMO, the routing solution should be responsible for handling default values as well as it's updates.

RHF is not a routing library and all it's plugins / add-ons aim to solve the form's problems / improve the DX around managing forms. By opting in to handle the URL state, which is a huge topic on it's own, it might just largely increase the scope of the library at the price of the core package.

I don't see RHF developing and maintaining the discussed feature, TBH.

That said, let's see what @bluebill1049 think about it.

[MursalovAltun]

Everything said absolutely makes sense for me. I think this shouldn't be a part of react-hook-from. I'll try to build a separate library that will provide a resolver for RHF or will add some side effects to it.

[bluebill1049]

Agree with everything that @Moshyfawn stated above. thanks for understanding @MursalovAltun

[piszczu4]

@MursalovAltun did you mange to solve that problem?