Cannot update a component (SignupForm) while rendering a different component (Controller).

[Flaain]

codesandbox live demo

Hello, please help me to fix this error. I know that error happens cuz of isNextButtonDisabled: checkNextAvailability() in useSignup hook return. But i really don't know how to fix this. I using shadcnui Form in codesandbox you can check Form implementation

What i already tried to do:

Trying useEffect inside useSignup hook and return isNextButtonDisabled state to update button after re-render. The same thing trying to do in the parent SignupForm component. Nothing of this helps:

export const useSignup = () => {
    // another code here
    const [isNextButtonDisabled, setIsNextButtonDisabled] = React.useState(true);

    const v = form.getValues();
    
    React.useEffect(() => {
        const checkNextAvailability = () => {
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            const { name, ...restErrors } = form.formState.errors;
    
            const validateActions = {
                0: !!Object.keys(restErrors).length || !form.getValues(steps[step].fields).some(Boolean),
                1: !form.formState.isValid,
            };
    
            return  form.formState.isSubmitting || validateActions[step as keyof typeof validateActions] || loading
        };
    
        setIsNextButtonDisabled(checkNextAvailability());
    }, [form, loading, step, v]);
};

SignupForm:

const SignupForm = () => {
    const { form, loading, onBack, onNext, step, stepsLength, isNextButtonDisabled, isLastStep, onSubmit } = useSignup();

    const forms: Record<number, React.ReactNode> = {
        0: <FirstStepSignUp form={form} />,
        1: <SecondStepSignUp form={form} />,
    };

    return (
        <div className='flex items-center w-full h-full max-w-[1230px] mx-auto px-3 box-border'>
            <div className='flex flex-col gap-2 items-end pr-10 max-md:hidden'>
                <h1 className='text-6xl max-lg:text-4xl font-bold text-white text-balance text-right'>
                    Create account
                </h1>
                <p className='text-xl max-lg:text-base text-white opacity-50 text-right'>
                    We're so excited to have you join us!
                </p>
            </div>
            <Form {...form}>
                <div className='flex max-md:justify-center flex-1 md:pl-10 md:border-l md:border-solid md:border-primary-dark-50 md:h-full'>
                    <form
                        onSubmit={form.handleSubmit(onSubmit)}
                        className='flex flex-col gap-4 h-full justify-center md:min-w-[560px] max-md:max-w-[500px] max-md:w-full'
                    >
                        <span className='text-white font-medium mb-5'>
                            Step {step + 1} of {stepsLength}
                        </span>
                        {forms[step]}
                        <div className='flex w-full items-center justify-between mt-5'>
                            <Button
                                type='button'
                                variant='secondary'
                                className='w-24'
                                onClick={onBack}
                                disabled={form.formState.isSubmitting || loading}
                            >
                                Back
                            </Button>
                            <Button type='button' onClick={onNext} className='w-24' disabled={isNextButtonDisabled}>
                                {isLastStep ? "Submit" : "Next"}
                            </Button>
                        </div>
                    </form>
                </div>
            </Form>
        </div>
    );
};

export default SignupForm;

useSignup:

const steps: Array<{ fields: Array<FieldPath<z.infer<typeof signupSchema>>> }> = [
    { fields: ["email", "password", "confirmPassword", "birthDate"] },
    { fields: ["name"] },
];

export const useSignup = () => {
    const { setAuthStage } = useAuth();

    const [step, setStep] = React.useState(0);
    const [loading, setLoading] = React.useState(false);

    const form = useForm<z.infer<typeof signupSchema>>({
        resolver: zodResolver(signupSchema),
        defaultValues: {
            email: "[email protected]",
            password: "testtest",
            confirmPassword: "testtest",
            name: "",
            birthDate: "2010-01-01",
        },
        disabled: loading,
        mode: "all",
        shouldFocusError: true,
    });

    const checkNextAvailability = () => {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { name, ...restErrors } = form.formState.errors;

        const validateActions = {
            0: !!Object.keys(restErrors).length || !form.getValues(steps[step].fields).some(Boolean),
            1: !form.formState.isValid,
        };

        return  form.formState.isSubmitting || validateActions[step as keyof typeof validateActions] || loading
    };

    const onSubmit = React.useCallback(async (data: z.infer<typeof signupSchema>) => {
        console.log(data);
    }, []);

    const onNext = React.useCallback(async () => {
        try {
            const valid = await form.trigger(steps[step].fields);

            if (!valid) return;

            setLoading(true);
            setStep((prevState) => prevState + 1);

        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    }, [form, step]);

    const onBack = React.useCallback(() => (step ? setStep((prevState) => prevState - 1) : setAuthStage("welcome")), [setAuthStage, step]);

    return {
        form,
        step,
        stepsLength: steps.length,
        isLastStep: step === steps.length - 1,
        loading,
        onNext,
        onBack,
        onSubmit,
        isNextButtonDisabled: checkNextAvailability(),
    };
};

[DevWedeloper]

I'm experiencing the same error, my case is when I render the form inside a dialog (modal), and triggering the dialog (pop-up) would cause the error. I only experience getting the error on dev mode, it is not showing on prod.

I'm using shadcn too..

[Flaain]

i will close this discussion cuz error gone after i do this ( https://github.com/orgs/react-hook-form/discussions/11722#discussioncomment-8994721 )