React: Deduplicate the "Can only update a mounted or mounting component" warning

[gaearon]

Note: @anushreesubramani is working on this, please don’t send PRs if you aren’t her :-)

---

Similar to https://github.com/facebook/react/issues/11081.

@anushreesubramani Wanna take this one as well? It would need to deduplicate based on owner/stack info, similar to how https://github.com/facebook/react/pull/11120 works.

[anushreesubramani]

@gaearon Sure .. Would be happy to take it up !

[anushreesubramani]

Actually @gaearon, do you want me to do a full check on all the warnings? It'll be better than raising individual issues.

[gaearon]

Yea that would be amazing. I don't think they necessarily always have to be deduped... but it might be easier to discusss specific cases where they shouldn’t, and convert the rest.

[anushreesubramani]

So, any pointers on how I can go about identifying those specific cases that don't need to be deduped? @gaearon

[gaearon]

I don't have any clear guideline. I think the most useful one is: does the warning happen during render. If it does then it's likely it'll happen again and again and again, and spam the console. Then it should be deduped.

Whereas if the warning itself can only happen when user calls some specific API, and that API is typically called outside of render phase, it might not make sense to dedupe.

[anushreesubramani]

I found 2 versions of the "Can only update a mounted or mounting component" warning:
First is from ReactFiberScheduler.js (which is imported by ReactFiberReconciler.js)

Warning: Can only update a mounted or mounting component. This usually means you called >setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the App component.

The second one is from ReactNoopUpdateQueue.js (which is imported by ReactBaseClasses.js)

Warning: setState(...): Can only update a mounted or mounting component. This usually means you >called setState() on an unmounted component. This is a no-op.

Please check the code for the App component.

@gaearon Just have a few doubts:

1. Is this repetition intentional? Do they serve different purposes, if so what are they?
2. I have to dedupe the warning in ReactFiberScheduler.js alone or both?

Thanks in advance :)

[gaearon]

The one in ReactBaseClasses is likely to almost never happen. It only happens if somebody creates an instance of a React component manually, e.g. new MyComponent(props), and then tries to call setState.

Let’s dedupe both I think. This means that in the very unlikely case both fire, there will be at most two warnings rather than one. But that’s okay.

[anushreesubramani]

There were totally ~120 warnings in the React codebase. I checked them all and came up with a list of ~20 warnings which were not deduped. I have fixed the ones which I felt will be duplicated during re-render(as per your suggestion) and have given the PR. I still have a list of other warnings which I am unsure if they need deduplication or not. I can share the list if you wish to take a look at it. Apologies for the delay in giving the PR. @gaearon

[gaearon]

This was fixed.

[lifeeric]

I getting this Error in console, I don't know why

proxyConsole.js:56 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the _class2 component.