Use state causes infinite loop

Question

I'm trying to show a component and hide another based on a click event. However, I'm getting this error saying there is an infinite loop.

this is my code

 const { register, handleSubmit, formState: { errors } } = useForm();

 const [showPage , setShowPage] = useState(true);


 {showPage &&(
        <div>
      <FormContent>
        <Form 
              onSubmit={
                handleSubmit((data, e) => {
                try {
                  console.log(data);
                  setShowPage(false);
                  e.preventDefault();
                  //submit(data); 
                } catch (err) {
              console.log(err);
            }
        })}>
        </Form>
      </FormContent>
      </div>
      )}
      {!showPage &&(
        <ForthPage />
      )}

and this is the error i'm getting

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

  49 | onSubmit={handleSubmit((data, e) => {
  50 |   try {
  51 |     console.log(data);
> 52 |     setShowPage(false);
     | ^  53 |     e.preventDefault();
  54 |     //submit(data); 
  55 |   } catch (err) {

Can anyone explain what is wrong with my code

Post the full component, and what is submit() referring to?, handleSubmit should be a callBack function., and showPage ? <A/>:<B/> should do the job. — Shahed
– Shahed, Commented Oct 29, 2022 at 11:49

Nik · Accepted Answer · 2022-10-29 12:54:34Z

2

onSubmit={()=>{
    handleSubmit((data, e) => {
        try {
            console.log(data);
            setShowPage(false);
            e.preventDefault();
            //submit(data); 
        } catch (err) {
            console.log(err);
        }
        })
    }
}

If you want to call function or execution in onSubmit or any onClick function, you should use arrow function.

edited Oct 29, 2022 at 12:54

Nik

1,7092 gold badges16 silver badges26 bronze badges

answered Oct 29, 2022 at 12:31

Ethan Hunt

1365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use state causes infinite loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related