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

[sashahavia]

I am using GraphiQL in the form as a textarea field and every time I hit submit and navigate away from the page I get this warning

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 GraphiQL (created by GraphQlTextArea)

Can someone please look into this?

[acao]

sounds like it might be an issue with the current usage of componentWillIUnmount. what version of graphiql and react are you using? if you update to the 1.0.0-alpha.n versions of GraphiQL, we use react 16 and hooks and start to replace some of those methods.

if that doesn't help, we are in the midst of a rewrite, so after this PR is merged that lifecycle method won't be used at all anymore:

#1468

[sashahavia]

I am using graphiql version 0.17.5 and react version 16.8.6

Ok, I will try updating to the 1.0.0-alpha.n versions

[acao]

ok yeah, lemme know! that should be the most progressive path. if that doesn’t work, graphiql 0.x.y versions seem to work best with react 15

[sashahavia]

I tried 1.0.0-alpha.8 version of graphiql and still getting the error. Unfortunately can't switch to react 15. Looking forward to the rewrite.

[acao]

@sashahavia yeah it's all still there:
https://github.com/graphql/graphiql/blob/master/packages/graphiql/src/components/GraphiQL.tsx#L351

our bad, we should have removed this a while ago. I think in react 16 at some minor version along the way they introduced it. don't usually see this because i don't test with any examples that programatically mount/unmount, GraphiQL is usually the root component in all of our examples!

if you fork master branch, you could remove the entire componentWillUnmount, or I can just kick out another alpha version with that removed, is that ok?

[acao]

this is why the upgrade to react 16 was still in alpha... I knew there'd be issues like this! thanks so much for raising it. I think I'll just make another quick alpha release to fix this before we merge the rewrite

[sashahavia]

If you can make another alpha release to fix that that would be great

[acao]

@sashahavia i'm still having trouble reproducing the issue, can you provide the steps to produce this bug? perhaps you can document the bug by forking this codesandbox?

[sashahavia]

The error happens only when you introduce useEffect

useEffect(() => {
    props.getEndpoints();
}, []);

[acao]

when you useEffect in a parent component? props.getEndpoints() - this is something specific to your implementation, right? let me see if i can reproduce so i can fix it, thanks for your patience!

[acao]

Here's a demo :
https://codesandbox.io/s/graphiql-js-next-example-qsh7h?file=/src/index.js

seems to be working ok with a basic console.log()

so possibly your props.getEndpoints() is doing something that triggers a bug that still may be on our side? does it write to state or use context or anything like that?

[sashahavia]

Yes, when I do console.log() in my implementation I also don't get an error

It only happens when I actually call my redux action to get all endpoints. My action makes an axios request

[sashahavia]

Not sure if this helps but here is the full stack trace of the warning

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 GraphiQL (created by GraphQlStatement)
    in div (created by GraphQlStatement)

r | @ | react_devtools_backend.js:6
-- | -- | --
  | warningWithoutStack | @ | vendors~main.bundle.js:114722
  | warnAboutUpdateOnUnmounted | @ | vendors~main.bundle.js:132691
  | scheduleWork | @ | vendors~main.bundle.js:134101
  | enqueueSetState | @ | vendors~main.bundle.js:125385
  | push.../../node_modules/react/cjs/react.development.js.Component.setState | @ | vendors~main.bundle.js:155038
  | (anonymous) | @ | vendors~main.bundle.js:50653
  | Promise.then (async) |   |  
  | push.../../node_modules/graphiql/esm/components/GraphiQL.js.GraphiQL.fetchSchema | @ | vendors~main.bundle.js:50646
  | push.../../node_modules/graphiql/esm/components/GraphiQL.js.GraphiQL.componentDidMount | @ | vendors~main.bundle.js:50405
  | commitLifeCycles | @ | vendors~main.bundle.js:131550
  | commitAllLifeCycles | @ | vendors~main.bundle.js:132952
  | callCallback | @ | vendors~main.bundle.js:114365
  | invokeGuardedCallbackDev | @ | vendors~main.bundle.js:114415
  | invokeGuardedCallback | @ | vendors~main.bundle.js:114472
  | commitRoot | @ | vendors~main.bundle.js:133164
  | (anonymous) | @ | vendors~main.bundle.js:134634
  | unstable_runWithPriority | @ | vendors~main.bundle.js:168544
  | completeRoot | @ | vendors~main.bundle.js:134633
  | performWorkOnRoot | @ | vendors~main.bundle.js:134562
  | performWork | @ | vendors~main.bundle.js:134470
  | performSyncWork | @ | vendors~main.bundle.js:134444
  | requestWork | @ | vendors~main.bundle.js:134313
  | scheduleWork | @ | vendors~main.bundle.js:134127
  | scheduleRootUpdate | @ | vendors~main.bundle.js:134788
  | updateContainerAtExpirationTime | @ | vendors~main.bundle.js:134816
  | updateContainer | @ | vendors~main.bundle.js:134873
  | push.../../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render | @ | vendors~main.bundle.js:135169
  | (anonymous) | @ | vendors~main.bundle.js:135306
  | unbatchedUpdates | @ | vendors~main.bundle.js:134675
  | legacyRenderSubtreeIntoContainer | @ | vendors~main.bundle.js:135302
  | render | @ | vendors~main.bundle.js:135371
  | ./main.js | @ | main.bundle.js:23273
  | __webpack_require__ | @ | main.bundle.js:785
  | fn | @ | main.bundle.js:151
  | 0 | @ | main.bundle.js:32553
  | __webpack_require__ | @ | main.bundle.js:785
  | checkDeferredModules | @ | main.bundle.js:46
  | (anonymous) | @ | main.bundle.js:861
  | (anonymous) | @ | main.bundle.js:864

[acao]

hmm, trying to emulate what may be happening and I still don't quite see it - maybe it's re-mounting because of multiple incoming props changes, which would invoke willUmount, and my guess is this is happening just as redux is performing it's async fetch operation. It seems in React 16 they have safegaurds against this that weren't there for the old react 15 lifecycle, which is why we are just seeing this with the new react hooks components? Just a theory. Here's my attempt:

https://codesandbox.io/s/graphiql-js-next-example-qsh7h?file=/src/index.js

i have an idea for a quick potential hack though, but I cannot test it because I cannot reproduce this.

try this beneath where you import GraphiQL component:

GraphiQL.prototype.componentWillUnmount = undefined;

(when i try that it runs fine)

I think maybe this indeed is the culprit as suspected, and I could remove the method and re-release without being able to test myself, but this would allow you to test much more quickly