react-hook-form / devtools

📋 DevTools to help debug forms.
https://react-hook-form.com/dev-tools
MIT License
638 stars 48 forks source link

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

Open yudielcurbelo opened 4 months ago

yudielcurbelo commented 4 months ago

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.

uh1Tz87m7M

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

cmayoracurzio commented 4 months ago

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

Bartizan commented 4 months ago

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 commented 4 months ago

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

ic-768 commented 2 months ago

Same here

BigSamu commented 1 month ago

Same here! Any updates on this?

shin616122 commented 1 month ago

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