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

[yudielcurbelo]

Version Number

7.51.3

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/nervous-nova-mjw92s?file=%2Fsrc%2FApp.tsx

Steps to reproduce

1. Go to Sandbox
2. See console

Expected behaviour

This warning is not present on 7.51.0 but is in 7.51.1 and current.

There should not be any warning.

What browsers are you seeing the problem on?

Chrome

Relevant log output

Warning: Cannot update a component (`DevTool`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in https://fb.me/setstate-in-render
    in Unknown (at App.tsx:47)
    in form (at App.tsx:40)
    in div (at App.tsx:34)
    in App (at src/index.tsx:7)

Code of Conduct

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

[cmayoracurzio]

Thank you @yudielcurbelo for opening this issue. Also adding link to original issue which was incorrectly transferred to the devtools repo.

[Bartizan]

Here is a sample of the same error with data binding via values property.

The source code: react-hook-form-devtool-issue.zip
react-hook-form: 7.51.1 - 7.51.3
@hookform/devtools: 4.3.1

function App() {
  const { control, register, handleSubmit } = useForm({
    values: { firstName: 'John' }   // <-- causes error "Cannot update a component (`DevTool`) while rendering a different component (`Controller`)."
  });

  const onSubmit = (data: unknown) => {
    alert(JSON.stringify(data));
  };

  return (<>
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input placeholder="first name" {...register("firstName")} />
      </div>

      <input type="submit" />
    </form>

    <DevTool control={control} />
  </>);
}

[dd-jonas]

Also facing this issue, had to remove devtools from my forms 😕