formik: Can't perform a React state update on an unmounted component.

🐛 Bug report

Current Behavior

When component is unmounted for any reason and a pending formik workflow is still pending an error message shows up:

index.js:2178 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 the componentWillUnmount method.
    in Formik (created by WithFormik(class_1))
    in WithFormik(class_1) (created by Connect(WithFormik(class_1)))

Expected behavior

No error

Reproducible steps

1 - Create a simple formik form. 2 - Make a submit event and change view right after. In my case I’m just redirecting the user to another route due to a non-authorized request.

Versions

Software	Version(s)
Formik	1.4.1
React	16.7.0
TypeScript	3.2.2
Browser	Chrome (71.0.3578.98)
npm/Yarn	1.9.4
Operating System	OSX

This is might be related: https://github.com/jaredpalmer/formik/issues/772

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 15 (3 by maintainers)

Most upvoted comments

Getting the same error with react-testing-library:

Form.js

const Form = () => (
  <Formik initialValues={{ name: 'test' }}>
    {({ handleChange, values }) => (
      <input
        data-testid="name"
        name="name"
        onChange={handleChange}
        value={values.name}
      />
    )}
  </Formik>
)

Form.test.js

test('test', async () => {
  const { getByTestId } = render(<Form />)
  fireEvent.change(getByTestId('name'), { target: { value: 'asdf' } })
})

tu4mo on Jan 11, 2019

I found the solution here

rearmitage on Jan 16, 2019

Also just ran into this after previously not having issue.

ZHamburglar on Jan 7, 2019

wait is not a good solution. This seems a problem with the component itself. I can’t workaround my test because of it. I like formik, but it is being not so good for testing it. Could be a problem with my implementation, I don’t know, but I don’t have this problem when using it in the browser.

lourenci on Jan 25, 2019