formik
formik copied to clipboard
Make automatically setting isSubmitting to false optional
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
.
i tried using this optional FormikProp disableAutomaticIsSubmittingChange but the error still shows in my console
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.