Why does Formik cause recursion on initialization?

Question

React

I have a component that has a form

<Formik
    onSubmit={...}
    enableReinitialize
    initialValues={oldValues}
>
    <CurrentForm />
</Formik>;

And the currentForm itself

function CurrentForm() {
    const { values, setFieldValue, handleSubmit } = useFormikContext();
    return (
      <div onSubmit={handleSubmit}>
          <Input1 />
          <Input2 />
          <Input3 />
          <Button />
      </div>
    );
}

After entering all the values, I take the values ​​and store all the values ​​in redux. Then, in the same form, I need to put in other values ​​from Redux. To do this, you need to change the initialValues. Accordingly, I want to change oldValues ​​to new newValues. Then you need to re-initialize Formika, but setting enableReinitialize on a new render of the component causes recursion (

What could be the reason or are there options to avoid this problem?

Answer 1

The first thing that catches your eye is that div is used in place of the form tag. Replace as this is mistake

function CurrentForm() {
    const { values, setFieldValue, handleSubmit } = useFormikContext();
    return (
      <form onSubmit={handleSubmit}>
          <Input1 />
          <Input2 />
          <Input3 />
          <Button />
      </form >
    );
}