devtools

devtools copied to clipboard

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

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

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

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} />
  </>);
}

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

Same here

Same here! I wonder what could be producing this warning.

Same here..I thought my form components was bad and waste a lot of time debugging it...