using error with only have control object and without useContext

[mh-alahdadian]

Hello
Sometimes form is so big and we will break it down to more components , each of these component wants to interact with form
in v5 we need to use context to pass watch and control object and other formMethods down
but in v6 we can watch values with useWatch and so we don't need all formMethods so we can just pass control object down and it have many of method and can interact with form

my question is that is there any way to watch errors and values in a component with only have control object?

I have this code on my component

const {x, y} = useWatch({name: ["x", "y"], control})
const errors = control.errorsRef.current

function validate() {
control.trigger(["x", "y"])
}

It does work and it will give me latest errors after calling trigger but I wants to make sure that is it OK?
is useWatch re-render my component after calling trigger? or is there any warranty for re-rendering my component?
should we have a useErrors hook as well?

[bluebill1049]

@mha15 anything inside control is not documented and we wouldn't recommend' relay on that. I don't think we will introduce a new hook anytime soon. Does it have huge performance issue with errors?

[mh-alahdadian]

Well I think when we have a component which should control one or two fields it's a good idea to pass control to it just like Controller component
also control object is changing in some renders and it cause Controller (and our custom Component which will receive control object) to rerender
I was thinking about a completely different api which is something like

const control = useFormControl(/* useControl inputs are like useForm */); // control should be persisted and never changes 

// another component which will receive control object
const values = useWatch(, control); // maybe useValues is better name for this hook 
const errors = useError( , control); 
const formState = useFormState( , control);

this control object will not change in rerenders and it have all not changeable methods of formMethods and we can pass it to custom hooks to get state and changeable values of form
also a control can passed to Context and hooks can use provided control instead of get it as input

[bluebill1049]

some good ideas there.

[mh-alahdadian]

and also I would be happy to help you and make some PRs to you for new faster api
I had look inside useForm hook and it was using too many hooks inside it which we can decrease them to improve performance of it (as you know react hooks are not costless and using too many of them is expensive)

[bluebill1049]

Thanks @mha15, happy to see small PRs to be introduced.