Handling complex data structures with a getter/setter model?

[ds82]

I'm looking for a clean and performant way to handle a quite large JSON data source with react-hook-form. The model is complex and nested and changing a value could have an impact on other values that than needs to be updated and stuff like that. We usually write a separate npm package/model to handle the data source (and provide getter and setter for the model that handle the heavy lifting). This also has the advantage that we can use the package in other projects that need to handle the same data source.

My impression is, that react form libraries in general don't work well with getter/setter functions and react-hook-form is no exception; these libraries usually expect to work on a plain object.

My idea was to add an extra abstraction in form of an JS Proxy that translates between the model/JSON structure and the formValues. Setting a formValue in the proxy could then call the correct function in the model, update the JSON structure and return the updated value to the form.

I know. Quite complex .. but this way I could provide a simple plain object to react-hook-form to work on ..

But testing this approach makes the impression that react-hook-form does not work quite well with JS Proxy objects .. (e.g. I can't get useWatch to work on a value .. react-hook-form doesn't even call the getter on the proxy for the watched value).

Has somebody ideas/opinions on this topic or done something similar?