useFormik hook for user authentication

Question

Does anyone use useFormik hook? I need to validate username and password on the server. For validation I use the handleLogin(username, password) method. Here is my code:

const LoginForm = withFormik({
    mapPropsToValues: () => ({username: "", password: ""}),
    handleSubmit: (values, {props, setSubmitting}) => {
        const {handleLogin} = props;
        const {username, password} = values;
        handleLogin(username, password).then(() => { setSubmitting(false); });
  }
})(LoginView);

The fact is that if the validation is successful, it redirects me to the main page. This causes a memory leak error. Here is the text of the error:

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.
    at Formik (http://localhost:3000/static/js/bundle.js:110048:19)
    at C (http://localhost:3000/static/js/bundle.js:110430:34)
    at Login (http://localhost:3000/static/js/bundle.js:13909:71)
    at div

Error at the place where then(() => { setSubmitting(false); }); is called. If you remove it and leave it like that, then everything works fine. But after all, the documentation says that you need to specify setSubmittingin the false state.

As far as I understand, the error occurs when it is impossible to assign a value. the component will be removed when you navigate to another page. How can this be fixed?

Answer 1

You have asked about useFormik but only included code referencing a withFormik HOC and handling state updates on a potentially unmounted component. I'll answer according to the code included in the question.

By your own admission you use handleLogin to validate and submit the form and "that if the validation is successful, it redirects me to the main page."

I understand this to mean that upon successful authentication the user is redirected to another page and the current page with LoginForm is unmounted and React is warning you about a potential resource leak with an enqueued state update.

To be clear, this is just a warning, you could choose to ignore it if you wanted.

I suspect you may only want to clear the submitting state in the failure/Promise-rejection path. To do this use the catch block of the Promise chain instead.

const LoginForm = withFormik({
  mapPropsToValues: () => ({ username: "", password: "" }),
  handleSubmit: (values, { props, setSubmitting }) => {
    const { handleLogin } = props;
    const { username, password } = values;
    handleLogin(username, password)
      .then(response => {
        // log any success message, etc...
        // ...but don't enqueue any state updates
      })
      .catch((error) => {
        // log the error, set any error state, etc...
        // clear submitting state
        setSubmitting(false);
      });

  }
})(LoginView);