I am working on an event management system where admins can create event packages that include details such as venues, photography, catering, and decoration services. In the package creation form, there are four dropdowns, each making an API call to fetch vendor details (e.g., venue details). The API response is stored in the Redux store, and I am accessing it via getVenue.

Expected Behavior:

When the getVenue value in the Redux store changes, I want the venue details (such as venueName) to be automatically updated in the form state of React Hook Form (RHF).

Issue:

Inside the useEffect where I handle this, the form state seems to be updating correctly when I log the value with getValues(). However, when I check the form state outside this useEffect, it’s not updated as expected. I’ve tried using both watch() and getValues() from RHF, but I’m unable to pinpoint the exact problem.

Here’s the code snippet for reference:

const {
  register,
  handleSubmit,
  reset,
  control,
  getValues,
  setValue,
  watch,
  formState: { errors }
} = useForm({
  defaultValues: {
    venueId: currentPackageData?.venueId || "",
    venueName: "",
    photographyId: currentPackageData?.photographyId || "",
    photographyName: "",
    cateringId: currentPackageData?.cateringId || "",
    cateringName: "",
    decorationId: currentPackageData?.decorationId || "",
    decorationName: "",
    name: currentPackageData?.name,
    isActive: currentPackageData?.isActive || false,
  },
});

useEffect(() => {
  register("venueName");
}, [register]);

useEffect(()=>{
  if(getVenue){
    setValue("venueName", getVenue.name); // update form state
    setVenueName(getVenue.name); // update local state
  }
  console.log("formstate after setting venueName:", getValues()) // will show me value
},[getVenue])

const watchedVenueName = watch("venueName");
useEffect(() => {
  console.log("venueName/formState is changing:", getValues("venueName"));  
}, [watchedVenueName]); // formstate is not changing for some reason

What I’ve tried:

• Using setValue() to update the form state when getVenue changes.

• Logging the form state within and outside the useEffect.

• Using watch() and getValues() to track form changes, but the form state isn’t consistently updating outside the useEffect.

Additional Context:

• I need these details to be stored in formState because they will be sent in the create package API request at submission. Some of the fields doesn’t need to be visible in the UI so i registered them dynamically.

Any help or pointers would be appreciated!