issue: 7.51.4 form initially dirty when using shouldUnregister: true

[robcaldecott]

Version Number

7.51.4

Codesandbox/Expo snack

https://github.com/robcaldecott/react-hook-form-dirty-bug/blob/main/src/App.tsx

Steps to reproduce

Since upgrading to 7.51.4 it seems that the behaviour of shouldUnregister has changed and our form is starting out initially dirty before the user has made any changes. I have tracked this down to the conditional rendering used for some fields: if not all fields are rendered then the form isDirty state seems to be broken.

For example, the following code shows the issue:

import { Controller, useForm } from "react-hook-form";

function App() {
  const form = useForm({
    shouldUnregister: true,
    defaultValues: {
      name: "",
      optional: "",
    },
  });

  const { isDirty } = form.formState;

  return (
    <>
      <p>isDirty: {isDirty ? "true" : "false"}</p>

      <form>
        <input {...form.register("name")} />
        {/* conditionally rendered */}
        {false && <input {...form.register("optional")} />}
      </form>
    </>
  );
}

Note that the optional component is being conditionally rendered. This causes isDirty to start off as true. If the optional component is rendered then the isDirty state is initially false which is correct.

This issue was introduced with 7.51.4. Rolling back to 7.51.3 fixes it.

Another observation: if an initial value for optional is NOT included in defaultValues then the issue does not occur, but then we get TS issues with controllers that rely on the control name, etc.:

const form = useForm({
  shouldUnregister: true,
  defaultValues: {
    name: "",
    // optional: "",
  },
});

For context, we have numerous components that render based on the value of other components on the form.

An example repo showing this problem can be found here: https://github.com/robcaldecott/react-hook-form-dirty-bug/

Expected behaviour

Previous to 7.51.4 the value of isDirty was initially false even when conditionally rendering components.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[kenpryde]

I get that same issue even with just a single field, and I've also noticed that if shouldUnregister is set to true, either on a component, or at the useForm level, I get a rendering error:

Cannot update a component (`AppForm`) while rendering a different component (`Controller`).

This is with ShadCN UI's Form provider and RHF. Setting shouldUnregister to false stops the error.