formik icon indicating copy to clipboard operation
formik copied to clipboard

Make automatically setting isSubmitting to false optional

Open tobiaswaltl opened this issue 3 years ago • 2 comments

Feature request

Current Behavior

When using Formik with an asynchronous submit handler, isSubmitting is automatically set to false after the handler resolves (according to the important note here). When unmounting the component within the submit handler (e.g. because submission was successful and we can close the form / navigate away), Formik tries to set isSubmitting to false resulting in a React warning

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Desired Behavior

It would be great to optionally tell Formik not to set isSubmitting automatically. Also this guideline should reflect the different behavior depending on the submit handler being synchronous or asynchronous.

Suggested Solution

A possible solution would be to add an optional FormikProp disableAutomaticIsSubmittingChange (there's probably a better name for that). By making it an optional prop without changing the previous behavior when omitting it, it wouldn't be a breaking change. Usage would be like this:

<Formik
  onSubmit={async (values, formikBag) => {/* some async handling here */}}
  disableAutomaticIsSubmittingChange
  ...
>
  ...
</Formik>

Who does this impact? Who is this for?

Everybody who is unmounting the component after submission.

Describe alternatives you've considered

Either ignore the console error or use setTimeout within the handler to delay the unmounting so that the component is still mounted when Formik sets isSubmitting.

tobiaswaltl avatar Sep 17 '21 13:09 tobiaswaltl

i tried using this optional FormikProp disableAutomaticIsSubmittingChange but the error still shows in my console

AlexanderOba avatar May 22 '22 16:05 AlexanderOba

What do you mean with trying the prop? The prop is not implemented. This issue is a suggestion to implement that prop so that users can get rid of the error.

tobiaswaltl avatar May 25 '22 20:05 tobiaswaltl