useForm diff btw @refinedev/core and @refinedev/react-hook-form?

2 Replies

Hi @flankieflew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useForm hook is available in both @refinedev/core and @refinedev/react-hook-form packages, but they serve slightly different purposes and have different functionalities. The useForm hook from @refinedev/core is the foundation of all the other extensions and useForm implementations in the other helper libraries. It primarily handles form submission, data fetching, caching, state management, and server-side error handling. It's used to orchestrate Refine's data hooks to create, edit, and clone data, and also provides a set of features to make it easier for users to implement their real-world needs and handle edge cases such as redirects, invalidation, auto-save, and more [source (https://refine.dev/docs/data/hooks/use-form/)]. On the other hand, the useForm hook from @refinedev/react-hook-form is an extension of the core useForm hook. It combines the power of the useForm() Refine core hook with the features of the react-hook-form library, which includes better form fields state management and error handling. This hook returns the necessary properties and methods to control the <form> element and has been developed by using useForm imported from the @refinedev/core package [source (https://refine.dev/docs/packages/react-hook-form/use-form/)]. Here's an example of how you might use the useForm hook from @refinedev/react-hook-form:

import { useForm } from "@refinedev/react-hook-form";  

const {  
  refineCore: { onFinish, formLoading, query },  
  register,  
  handleSubmit,  
  formState: { errors },  
  saveButtonProps,  
} = useForm<IProduct, HttpError, FormValues>({  
  refineCoreProps: {  
    resource: "products",  
    action: "edit",  
    id: 123,  
  },  
});
return (  
  <form onSubmit={handleSubmit(onFinish)}>  
    <label>  
      Name:  
      <input {...register("name")} />  
    </label>  
    <label>  
      Material:  
      <input {...register("material")} />  
    </label>  
    <button type="submit">Submit</button>  
  </form>  
);

import { useForm } from "@refinedev/react-hook-form";  

const {  
  refineCore: { onFinish, formLoading, query },  
  register,  
  handleSubmit,  
  formState: { errors },  
  saveButtonProps,  
} = useForm<IProduct, HttpError, FormValues>({  
  refineCoreProps: {  
    resource: "products",  
    action: "edit",  
    id: 123,  
  },  
});
return (  
  <form onSubmit={handleSubmit(onFinish)}>  
    <label>  
      Name:  
      <input {...register("name")} />  
    </label>  
    <label>  
      Material:  
      <input {...register("material")} />  
    </label>  
    <button type="submit">Submit</button>  
  </form>  
);

[source (https://refine.dev/docs/guides-concepts/forms/#basic-usage)] In this example, useForm is used to manage the form, and it returns the necessary properties and methods to control the form element. The refineCore object contains properties and methods from the core useForm hook, while the other properties and methods are from the react-hook-form library. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useForm diff btw @refinedev/core and @refinedev/react-hook-form?

Did you find this page helpful?