Getting error with form: Cannot update a component while rendering a different component

[anluik]

Hello! I’m having this issue in a project I’m working on and I’m hoping someone can help me out.
Project uses React+shadcn+react-query. I have form with two fields.

export default function MyComponent() {
    const form = useForm<z.infer<typeof formSchema>>({...});
    ...
    return (
        <Form {...form}>
            <form onSubmit={...)}>
                <FieldOne />
                <FieldTwo />
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    );
}

Field two depends on field one - if field one changes, a http request is made inside field two that is enabled only when fieldOne has a value:

export const FieldTwo = () => {
    const form = useFormContext();
    const watchFieldOne = form.watch("fieldOne");
    const query = useGetSomethingBasedOnFieldOne(watchFieldOne);

    useEffect(() => {
        if (query.data) {
            form.setValue("fieldOne", query.data.someValue);
        }
    }, [form, query.data]);

    return (
        <FormField
           control={form.control}
           name="fieldTwo"
           ...
        />
    );
}

The very first time fieldOne changes, I get a console warning:

Warning: Cannot update a component (`MyComponent`) while rendering a different component (`Controller`). To locate the bad setState() call inside `Controller`, follow the ...

The form works, but this warning really bothers me. At first I had all code in one component and it worked, now I refactored and get an error.
I tried replicating the issue with just react-hook-form (sandbox), but I couldn't replicate console warning.
What could I do better here? TYIA

[hojjat-afsharan]

Facing the same issue, cannot get rid of the console error.

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

And the 'Controller' refers to this (FormField of shadcn Form element):

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  );
};

[hojjat-afsharan]

Apparently there is a disabled attribute on submit button of this form and it is set to disabled={!formControls.formState.isValid}. Whenever I remove formControls.formState.isValid check, error also is gone. But I'm not sure how to properly check if the form is valid or not.

[hojjat-afsharan]

Issue in my case is fixed. I just removed checking for formControls.formState.isValid, instead I'm checking for something like this: !formControls.getValues("email")

[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

[jcarait]

I had the disabled prop on FormField /> component as well. Moving it to <Input> resolved the issue.

[lazharichir]

So what's the recommended fix?

[Ccry11]

Apparently the only way of solving this issue at the moment, if the fields are registered in other components than the one where useForm hook is initialized (which I think is what Shadcn is doing with the FormField), is by setting the disabled property directly on the input field. You can find more details here: react-hook-form/react-hook-form#10908 (comment).
Of course disabling the input directly leads to another issue where you will still see the disabled input values when submitting the form.