React Hook Form with ZOD
Hello,
What differs between using ZOD without React Hook Form and using ZOD with React Hook Form?
1 - Use React Hook Form doesn't rerender full component when sending to the backend of the website.
2 - It will be easier to handle the errors in the form.
For example, previously used for ZOD to validate and then use of name and value and use of a lot of use State components then it could be just in one place, for example:
const {addProduct,handleaddProduct}=useForm()
3- Custom error validation:
The product name should be no less than 3 characters and then the price should be a positive integer without custom validation for each component like the following example:
<form onSubmit={handleaddProduct(data)=>console.log(data)}>
<input {...addProduct('name'),{required:"Name is required",minLength:{value=3,pattern="Min length 3 characters"}>
<input {...addProduct('price'),{required:'Price is required",minValue:1,pattern:"Positive price"}>
</form>