Issue using DefaultValues

Describe the bug I want to pre-populate a form using data from my redux store. Previously, if I refreshed the form page, the default values would be injected correctly.

Since upgrading to RHF v4.0+, If I refresh the form page, default values are not injected into inputs. But if I click out and back into the form page, the values are there.

Here’s a basic code example:

PersonalDetails.tsx

const PersonalDetails = () => {
  const storedData = useSelector(
    (state: IStoreState) => state.personalDetails,
  );

  const methods = useForm({
    defaultValues: {
      personalDetails: storedData,
    },
  });

  const { handleSubmit } = methods;

if (storedData === undefined) {
    return <SkeletonLoading />
  } else {
    return (
      <FormContext {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <InputString
            name={personalDetails.firstName}
            label="First name"
            required={true}
             />
                    <InputString
                      name={personalDetails.lastName}
                      label="Last name"
                      required={true}
                    />
              <button type="submit">Save</button>
          </form>
        </FormContext>
  }

InputString.tsx

const InputString = ( label, name, required, infoText ) => {
  const methods = useFormContext();
  return (
    <div>
      <Input
        name={name}
        type="string"
        register={methods.register({ required })}
        value={methods.watch(name)}
        onChange={event => methods.setValue(name, event.target.value)}
      />
    </div>
  );
};

Hopefully, this is enough information to understand why this is happening but let me know if you need more context.

Thanks!

[bluebill1049]

if `defaultValues` is not read on the initial load, you will need to use `reset({ defaultValues })` at useEffect. thanks for the detailed issue report.

[bluebill1049]

Is there a particular reason the defaultValues is not read on the initial load?

I am asking this questions to learn and understand API design decisions being mades in this package. IMO, It seems counter intuitive to use reset({ defaultValues }) to set initial field values.

I do agree reset({ defaultValues }) is counter intuitive, here is the reason why and when you should use it.

defaultValue works well when your data is ready on the initial render, however sometimes defaultValue may come from API or delay, and that’s when you should use reset, i understand it would be better to use an API to called setValues, but i didn’t want to grow the amount API that user will have to remember and learn. That’s the reason i have decided to reuse reset. Form RHF v1 till today, we haven’t changed any of the primary API and try to keep it simple for most of our users.

hope above make sense.