DevTool error in console when appending to Field Array

[chanm003]

Version Number

7.51.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/young-dust-9752gj?file=%2Fsrc%2FApp.js

Steps to reproduce

1. Go to Code Sandbox
2. Open up Dev Tools console
3. Click on 'Add Project' button

Expected behaviour

There should be no errors:

import {
  useForm,
  FormProvider,
  useFormContext,
  useFieldArray,
} from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

import { ErrorMessage } from "@hookform/error-message";
import { DevTool } from "@hookform/devtools";

const validationSchema = yup.object().shape({
  firstName: yup.string().required("First Name is required"),
  Projects: yup.array().of(
    yup.object().shape({
      name: yup.string().required("Project title required"),
    })
  ),
});

export default function FormPage() {
  const methods = useForm({
    defaultValues: {
      firstName: "",
      Projects: [{ name: "" }],
    },
    resolver: yupResolver(validationSchema),
  });

  const { handleSubmit, control } = methods;
  const { fields, append } = useFieldArray({
    name: "Projects",
    control,
  });

  return (
    <>
      <div>
        <FormProvider {...methods}>
          <form
            onSubmit={handleSubmit(
              (data) => console.log("Valid", data),
              (errors) => console.log("NOT valid", errors)
            )}
          >
            <div>
              <h1>Form</h1>
              <InputField
                title="First Name"
                id="firstName"
                placeholder="Jhon"
              />

              {fields.map((field, index) => (
                <div
                  key={field.id}
                  style={{
                    paddingLeft: "25px",
                    marginTop: "15px",
                    marginBottom: "15px",
                  }}
                >
                  <InputField
                    id={`Projects.${index}.name`}
                    title={`Project ${index + 1}`}
                  />
                </div>
              ))}
              <div style={{ paddingLeft: "25px", marginBottom: "15px" }}>
                <button type="button" onClick={() => append({ name: "" })}>
                  Add Project
                </button>
              </div>

              <button type="submit">Submit</button>
            </div>
          </form>
        </FormProvider>
        <DevTool control={methods.control} />
      </div>
    </>
  );
}

const InputField: React.FC<{
  id: string,
  title: string,
  type?: string,
  placeholder?: string,
}> = ({ id, title, type, placeholder }) => {
  const {
    register,
    formState: { errors },
  } = useFormContext();
  const inputType = type ? type : "text";
  return (
    <div>
      <label style={{ display: "block" }}>{title}</label>
      <input
        id={id}
        type={inputType}
        {...register(id)}
        placeholder={placeholder}
      />
      <ErrorMessage
        errors={errors}
        name={id}
        render={({ message }) => <div style={{ color: "red" }}>{message}</div>}
      />
    </div>
  );
};

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

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

[chanm003]

As I type in the inputs, the DEV tool console updates, but there is an error initially when clicking on "Add Project"

[mokkabonna]

I also has this problem on 7.51.1 , not on 7.51.0. Additionally if using nested fields the validatingFields looks like this:

rootprop deep.nested.prop

Then validatingfields look like:

{
  rootprop: true,
  prop: true, // should not be here
  deep: {
    nested: {
      prop: true
    }
  }
}

Probably caused by https://github.com/react-hook-form/react-hook-form/pull/11624

[mokkabonna]

Does this have anything to do with devtools? I do not use the devtools and get a similar error.

[cmayoracurzio]

Does this have anything to do with devtools? I do not use the devtools and get a similar error.

Agreed, issue is not related to devtools, but rather to react-hook-form 7.51.1 and the error coming up in browser console.

@bluebill1049 could you please transfer back to react-hook-form issues? Thanks in advance!

[chanm003]

When I remove a single line (Line 80) in my code sandbox, everything works: <DevTool control={methods.control} />

Perhaps it is a coincidence? And the same error would occur with any child component? i.e. <MyTodo control={methods.control} />

[yudielcurbelo]

The warning started to occur in version: 7.51.1. I'm using controller with MUI and I'm getting the following warning everywhere.

Warning: Cannot update a component (`DevTool`) while rendering a different component (`Controller`).

The warning is still in version: 7.51.3