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 😕

[ic-768]

Same here

[BigSamu]

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

[shin616122]

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

[ahkhanjani]

Experiencing the same thing.

[Azazeel]

I get this error whenever I have a form element e.g. a text input that is not present at the beginning but gets rendered only when a different control is set to a specific value.

For example: I am using 2 radio buttons to display or hide an additional email field. When hidden, the email field is not being rendered at all. If the initial state of the form is the one where the additional email field is not being rendered, then switching to the option when the field will be rendered causes this error.

I solved this issue by hiding the form field with CSS instead of not rendering it at all. If someone has a different solution I would really like to see it.

[ahkhanjani]

Could Bruce Lee please look into this? @bluebill1049

[aaron-mota]

Same issue as @Azazeel , and I came up with a similar solution -- rendering content containing form fields, but hiding them via CSS (since I don't want them to be visible unless X happens).

For example, with the shadcn Accordion component, I have it collapsed by default, as it contains additional "optional" form fields.

I updated the Accordion component to have take in a group prop, which essentially adds the forceMount as well as some className logic for changing visibility (still playing around with the best class-based transition/animation for that, but this is what I have so far):

Updated shadcn Accordion

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
    group?: boolean; // use 'group' class to take over the animation (e.g. for accordion content within RHF -- needs to be 'hidden' vs rendered)
  }
>(({ className, children, group, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className={cn(
      'overflow-hidden text-sm transition-all',
      group ? 'group' : 'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
    )}
    forceMount={group ? true : undefined}
    {...props}
  >
    <div
      className={cn(
        'pb-4 pt-0',
        group && 'overflow-hidden transition-all duration-300 ease-in-out',
        group && 'group-data-[state=closed]:opacity-0 group-data-[state=closed]:h-0',
        group && 'group-data-[state=open]:opacity-100 group-data-[state=open]:h-auto',
        className
      )}
    >
      {children}
    </div>
  </AccordionPrimitive.Content>
));

---

UPDATE: now that I read all of the comments here instead of just the last ones 😅, it seems it may be a RHF Devtools issue, not an us-and-the-way-we're-using-RHF issue. Hopefully that fix comes soon 👍.

With that being the case, I think I'll continue trying to use a similar method, as if it gets fixed, all I need to do is remove the group prop and everything else stays the same.