Cannot update a component X while rendering a different component Y

[mysuf]

Version Number

7.46.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-form-context-forked-z59flv

Steps to reproduce

I was not able to reproduce it in sandbox. Partly because I'm not familiar with typescript and party because our app is quite complex and this issue is probably conditional by setup. However I was able to manually bisect version that introduced it, which is 7.46.0 and later (7.45.4 was fine). Stackoverflow thread about this issue says that it is caused by calling setState outside of useEffect. All errors points to either react-hook-form's register method on field or to Controller itself. We are using react 17.0.2.

Expected behaviour

It should not throw any errors.

What browsers are you seeing the problem on?

Chrome

Relevant log output

Warning: Cannot update a component (`FormContent`) while rendering a different component (`TextField`). To locate the bad setState() call inside `TextField`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Code of Conduct

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

[Moshyfawn]

I'm afraid there isn't much we can do without a reproduction.

There're were no state updates added to the RHF codebase in-between the versions you've mentioned.

[Moshyfawn]

Make sure you don't call setState in the component's render body in your app.

[Acousticdesk]

Calling setState in the render body is a well-recognized technique that allows to reduce the number of useEffect calls in the app.

Comment by Dan Abramov:
facebook/react#18178 (comment)

Another example by Mark Erikson (redux toolkit):
facebook/react#18178 (comment)

Official React docs:
https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

[mysuf]

@Acousticdesk The funniest thing is that setFormState in the render method uses react-hook-form itself and it causes all the problems mentioned. I pointed it out several times, found the incriminating line of code, edited one of the tests that replicates one variant of the error, but no response.

[mysuf]

I've seen this error first time at the moment when I updated react-hook-form so it brought me here. I'll try to find cause of this issue and reproduce it, but my first attempts to debug dist file of your app failed cos I'm not sure which one is imported by vite (hopefully not those minified).

[Moshyfawn]

Here's an example of what I'm talking about: #9632

I understand that you first saw this issue while using RHF. There're quite a few form state / data manipulations you can do with the library's API and a lot of the time it's the user-land calls to those APIs that cause the component update issue like you're facing.

[mysuf]

@Moshyfawn Already bisected line of code which causes it. Now I'm going to find out how to reproduce it, but its called directly from register method without any useEffect so... that shouldRender at the end of arguments causes my app apart of those warnings to throw "Maximum update depth exceeded"

Edit: "Maximum update depth exceeded" was caused by undefined defaultValue on Controller, but it is somehow related to mentioned commit.

[mysuf]

Here is the test code that reproduces this issue (tested on that particular commit from test folder of your project):

import React from 'react';
import {
  fireEvent,
  render,
  screen,
  waitFor
} from '@testing-library/react';
import { useForm } from '../../useForm';
import { FormProvider, useFormContext } from '../../useFormContext';

describe('formState', () => {
  it('should properly set isDirty when disabled is dynamicaly changed', async () => {
    const spyError = jest.spyOn(console, 'error');
    let isDirty: null | boolean = null;
    const defaultValues = { name: 'initial', disableName: true };
  
    const FieldList = () => {
      const { formState, register, watch, reset } = useFormContext();
      const disableName = watch('disableName');
      isDirty = formState.isDirty;

      // we haven't form data so we won't render fields
      if (disableName === undefined) {
        return (
          <input
            type="button"
            onClick={() => reset(defaultValues)}
            value="Emulate fetch form values"
          />
        );
      }

      return (
        <>
          <input type="text" {...register('name', { disabled: disableName })} data-testid="text-input" />
          <input type="checkbox" {...register('disableName')} />
        </>
      );      
    }

    const App = () => {
      const methods = useForm();

      return (
        <FormProvider {...methods}>
          <form>
            <FieldList />
          </form>
        </FormProvider>
      );
    };

    render(<App />);
  
    const reset = screen.getByRole('button');
      
    // FAILS
    // user didn't touch single field yet so isDirty should be false
    // lets skip it to get further
    //expect(isDirty).toBe(false);

    fireEvent.click(reset);

    const checkbox = screen.getByRole('checkbox');
    const textInput = screen.getByTestId("text-input");

    await waitFor(() => {
      expect(checkbox).toBeChecked();

      expect(textInput).toBeDisabled();

      // FAILS and triggers https://github.com/react-hook-form/react-hook-form/issues/10908
      // this spy check should be bind to all tests
      expect(spyError).not.toHaveBeenCalled();

      // FAILS
      // user didn't touch single field yet so isDirty should be false
      expect(isDirty).toBe(false);
    });

    // now user changes value first time
    fireEvent.click(checkbox);

    // checkbox was clicked and its value differs from defaultValue so isDirty should be true
    await waitFor(() => {
      expect(checkbox).not.toBeChecked();
      expect(textInput).not.toBeDisabled();
      expect(isDirty).toBe(true);
    });

    // text input is enabled and is now editable so we change value
    fireEvent.change(textInput, {target: {value: 'foo'}});

    // form should be still dirty
    await waitFor(() => expect(isDirty).toBe(true));

    // user returns checkbox's value to defaultValue which disables textInput
    fireEvent.click(checkbox);
    
    // now form should be in initial state
    await waitFor(() => {
      expect(checkbox).toBeChecked();

      expect(textInput).toBeDisabled();

      expect(isDirty).toBe(false);
    });
  });
});

[ettoredn]

I'm experiencing the same problem after updating to .46 from .45. I'll try to provide more info in the following days if I'm able to isolate the source of the problem in my components.

[mysuf]

@ettoredn Warnings appear when disabled fields are registered in other components than where useForm hook is initialized. That's why their examples have empty console - they use single components. I debugged which setState causes it and it is setFormState from useFormState hook. It is called directly from register function during render which is clearly wrong.

[kimsuyeon0916]

Wow...thank you so much👍🏻🚀

[ettoredn]

It's not just a warning in my case. It breaks the whole app because of infinite re-rendering loop.

[mysuf]

@bluebill1049 This is serious issue. It was wrongly tagged as question. I wrote even test to reproduce those warnings. I can even write test which crashes whole app if you want. There is issue #10907 related to this one and people are waiting for fix. This is showstopper for updating this lib until resolved. Thanks

[leapful]

@mysuf

Could you please share a codesandbox or github url that can reproduce the issue here ?

[mysuf]

@leapful Edit: Test code above prints different error. I will try to reproduce it again, but I swear I saw that error. Probably my further edits broke it... Anyway it is clear that this function during render calls updateTouchAndDirty which calls updateFormState. And setting state during render is really bad idea. setState should be called only in useEffect or event callback.

[mysuf]

@leapful Here we go https://codesandbox.io/s/react-hook-form-v7-form-context-forked-3rx93d

[leapful]

@mysuf

There is no warning "Cannot update a component X while rendering a different component Y" on your codesandbox url.

I only get this error "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops"

[mysuf]

@leapful Above I wrote " I can write even test that can crash whole app". This is just worse case of warning from title, but its still caused by the same line of code. It depends on setup.

[viveleroi]

Just updated from rhf 7.45.4 to 7.46.0 and this error is showing up for us too, I first noticed it in tests. This was not an issue in 7.45.4, not saying 7.46 is broken - maybe it's revealing an issue in our approach, idk. But everything was working fine in our app so I'm not sure.

Here's the error I get:

Warning: Cannot update a component (`TextAreaInputForm`) while rendering a different component (`TextAreaInput`). To locate the bad setState() call inside `TextAreaInput`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at TextAreaInput (a\path\\app\components\forms\inputs\textarea\textarea.tsx:14:3)
    at form
    at FormProvider (file:///.../node_modules/react-hook-form/dist/index.esm.mjs:164:13)
    at Form (a\path\\app\components\forms\forms.tsx:61:3)
    at TextAreaInputForm (a\path\\app\components\forms\inputs\textarea\tests\textarea.spec.tsx:20:3)

Here's the test mock form:

const TextAreaInputForm = ({
  defaultValue,
  disabled,
  required,
  name,
  ...props
}: TextAreaInputTestProps): JSX.Element => {
  const schema = z.object({
    [name]: zodTextInputSchema(z.string().min(3), Boolean(required), Boolean(disabled))
  })

  type Model = z.infer<typeof schema>

  const methods = useForm<Model>(schema, {
    defaultValues: {
      [name]: defaultValue
    }
  })

  return (
    <Form<Model> methods={methods} schema={schema}> // our form auto-passing control/register stuff to fields
      <TextAreaInput name={name} {...props} />
      <SubmitButton text='Submit' />
    </Form>
  )
}

Here's our textarea wrapper, which uses the blueprintjs textarea component:

export const TextAreaInput = ({
  disabled,
  inputClassName,
  label,
  name,
  readOnly,
  registerOpts,
  required,
  ...props
}: TextAreaInputProps): JSX.Element => {
  const { getFieldState, register, formState } = useFormContext()
  const { error, isTouched } = getFieldState(name, formState)
  const { isSubmitted } = formState

  const { ref, ...reg } = register(name, {
    ...registerOpts,
    disabled,
    required
  })

  const classNames = clsx(formsStyles.textFormField, 'flex-1', 'text-cursor', inputClassName, {
    [`${formsStyles.error} small-red-text`]: (isTouched || isSubmitted) && !disabled && !readOnly && error
  })

  return (
    <>
      {label && <Label htmlFor={name} label={label} required={required} />}
      <TextArea
        autoResize={false}
        className={classNames}
        fill
        id={name}
        inputRef={ref}
        readOnly={readOnly}
        {...props}
        {...reg}
      />
    </>
  )
}

[cassus]

I encountered the same issue

[alexandermukhin]

I have the same issue
Warning: Cannot update a component ('Form') while rendering a different component ('SwitcherField'). To locate the bad setState() call inside 'SwitcherField', follow the stack trace as described in

7.45.4 is working

[mysuf]

You should mention affected version, but I don't think that it'll draw any attention here. They resolved this report by moving it to discussion section. Issue board clean, problem solved.

[alexandermukhin]

>= 7.46.0

[akullpp]

Same issue, narrowed it down to a conditional disabled property on a MUI select element, no idea how to fix this though...

[alexandermukhin]

I investigated, it happens if disabled prop is false. There is no problem if disabled is undefined. Might be a similar issue #10907

[abfahimb]

thx. u r right

[dkAndFed]

Started experiencing the same issue after updating from 7.52.2 to 7.53.0 (diff). The mentioned fix, using undefined instead of false fixes the problem.

Edit: Passing undefined after true does not appear to trigger re-render and thus the form remains disabled.

[kimsuyeon0916]

If the property inside the second argument object of the register function is disabled: true;, the corresponding error occurs in the register function..!

Therefore, you should not set the disabled: true; property in the second argument, but disabled=true; should be directly injected within the input tag!

const { ref, ...rest } = register(name as Path<T>, validation?.disabled ? undefined : validation);

...

<input
	disabled={validation?.disabled}
	{...rest}
/>

[laholstege]

this is how i solved it, not passing disabled into the register. you can also surround the input with <fieldset disabled={disabled}> instead of passing it into the input. i didn't want to have to remember to do that, so i did:

const FormField = <T extends Record<string, any>>({
  register,
  name,
  ...
  disabled, // select out disabled and don't pass it to register or it will set the value to undefined
  ...options
}) => {
  const { ref, ...rest } = register(name, {
    required: {
      value: required,
      message: `${label} is required`,
    },
    ...options,
  });
  
    return (
        <Input
          ...
          disabled={disabled}
          {...rest}
        />
     );
 }

[khoait]

this works! thanks @kimsuyeon0916 @laholstege

[igokul1973]

I am having the same issue with the Controller when used in an array of fields via useFieldArray.
I have a form with a bunch of fields, one of which is emails. The emails field is actually an array of fields (consisting of email and type fields). These fields are wrapped into a PartialEmailForm component, out of which the type field is a MUI Select wrapped into a component which uses react hook form Controller.

<FormComponent>
       const {
        fields: emails,
        append: appendEmail,
        remove: removeEmail
    } = useFieldArray({
        name: 'emails',
        control
    });
    return (
            ... bunch of other fields...
            {emails.map((email) => (
                <PartialEmailForm control="control"...> // has 2 fields, one of which is a MUI Select wrapped into Controller
             ))}
             ... bunch of other fields...
             <button onClick={append({type: EmailTypeEnum.work, email: ''}) />
     )
</FormComponent>

So, it is a custom FormComponent, which has (among others) an array of PartialEmailForm components, which, in turn, have a custom FormSelect component (representing the email type field), which, in turn, has the Controller component wrapping the MUI Select component.
When the form is initially rendered with one default empty emails set of fields, all is fine (the requirement is to have at least one email on the form). But as soon as I click the append button, which uses the append function from the useFieldArray hook, the above warning occurs. An interesting twist is that it happens only once on the first addition (appendage) of the new set of empty email fields. And the fields get added fine. All subsequent clicks on the append button do not render the warning.
It is obvious that the Controller (when the append button is clicked for the first time, and a new Email component gets added to the Form component) does something internally to set the state of the form, hence issuing the warning.
I tried to pull out the type field directly into the Form component (i.e. not using the custom PartialEmailForm or even FormSelect components at all), but to no avail.
Well, I, as a component consumer, cannot get inside the Controller component, and somehow influence its setting the form's state at the very moment the array of emails changes which triggers the FormComponent re-render and the creation of the component which uses/initializes the Controller, so I guess the ball is in the loose of Reach Hook Form team to explain the workaround which would avoid the warning. Unless the warning can be simply ignored.
Also, for the second field (email - MUI TextField), which uses register(), I was able to use the React's useState and useEffect hooks inside the <PartialEmailForm /> upon its creation (when the append is clicked) in order to call the register() to get the props for the field in order to inject them into the email TextField (quite a convoluted set of actions), I'll repeat - unlike the possibility to choose when to call the register(), I don't have one with the Controller.

[john093e]

Not sure if this will help, when adding conditionally a form field to the dom to a form who's using controller, you can use :

form.reset({ ...form.getValues() })

To me it seems that it has resolve the following error : Cannot update a component (X) while rendering a different component (Controller).

an example of usage : this codesandbox

[Xatsh]

Dude, you save my life.
😭

[dougpiv]

This is the solution, ty so much <3

[abh31000]

I had the same issue when I was trying to do this inside a component that gets the form from props

form.setValue("example", "")

Used this instead and the warning went away

form.reset()

[itayperry]

For those who are having problems because of working with disable inside register() I started this discussion asking react-hook-form to just add setDisabled().
This will solve one problem out of a few.. that's something

https://github.com/orgs/react-hook-form/discussions/11941

In addition, it's important to mention that if you don't put the disasbled inside the register() (or controller when working with MUI) you'll see the disabled values on sumbit. According to the native HTML spec this shouldn't happen.
Disabled values natively cannot and should not be submitted.

[ludoblues]

I see many workarounds here but not sure there is an appropriate one in case you are using this disabled property inside of register() to tell the resolver (zod for instance) to not try to validate the values from the disabled inputs.

This is the only reason i am using it inside of register() in my case, i have checked and unchecked inputs and i only want the checked inputs to be validated with the resolver.

The disabled property does this job well, but produce this annoying warning...

[Usman-Marwat]

in my case i remove the disabled prop from <FormField disabled={loading}/> component. And passed it directly to the
<Input disabled={loading}/> component which was inside the FormField Component

[Ccry11]

Setting the disabled property directly on the input field is fine for the UI but you'll see the disabled input values on submit

[robbykurnia]

In my case, the issue stems from the disabled={isPending} prop on the form inputs and button. When you disable the form elements, React Hook Form tries to update the form fields while the inputs are disabled, causing the warning.

Why the Issue Occurs:

• React Hook Form uses the Controller component to manage form fields, and when inputs are disabled, React is still trying to rerender those inputs, which causes the issue.

I move disabled props, from <FormField disabled={loading}/> to <Input disabled={loading}/>

[aboqasem]

With shadcn's FormField, make disabled undefined instead of false when you want to enable the field:

const FormField = <
	TFieldValues extends FieldValues = FieldValues,
	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
	...props
}: ControllerProps<TFieldValues, TName>) => {
	// See https://github.com/orgs/react-hook-form/discussions/10964#discussioncomment-8481087
	const disabled = (props.disabled || undefined) as boolean;

	return (
		<FormFieldContext.Provider value={{ name: props.name }}>
			<Controller {...props} disabled={disabled} />
		</FormFieldContext.Provider>
	);
};