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

[eeynard]

Hi guys,

I recently upgraded to react-apollo-hooks@0.5.0 and have this react warning showing up every time a mutation is completed.
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

I checked out the code and it seems that the error and completed callbacks are fired no matter of the component mount state. see e0d05fd#diff-93bc3bb954808aa3a37a149008cd065fR114

The problem is that sometimes you call a mutation and do not need to wait for its completion to continue through your flow. In my case I call a mutation and unmount the component inside which it is initialised right after. Since there are setState in error/completed callbacks, it throws this React warning.

[m8ms]

Same issue here. This is my code:

Simple login logic:

const [login] = useMutation(LOGIN_MUTATION, {
    update: (cache, { data: { signIn } }) => {
      cache.writeQuery({
        query: CURRENT_USER_QUERY,
        data: signIn
      })
    }
  })
  return (
    <Formik
      onSubmit={async (variables, { setError, setSubmitting }) => {
        try {
          await login({ variables })
        } catch (err) {
          setError(t('errors.failedToLogin'))
        }
        setSubmitting(false)
      }}
    >
      {(things) => <Form {...things} />}
    </Formik>
  )

on CURRENT_USER_QUERY update component gets unmounted by auth logic outside and the message is:

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.
    in LoginForm
    in Unknown (created by Context.Consumer)
    in withRouter() (created by Context.Consumer)
    in Suspense (created by Context.Consumer)

I can avoid it by doing refetchQueries instead, but that's a redundant call to API :/
Please fix.

[susumuasaga]

Same problem, maybe we should revert to child render props with Mutation component.

[marlonmarcello]

Just stumbled upon this issue as well.