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

[maximkuzmin-dev]

Get the warnings when I try to unmount React component which is uses chat-engine, namely ChatFeed component. 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. The same warning comes from next components:

• IsTyping
• ScrollDownBar
• ConnectionBar

All of these components was debugged by writing custom ones and passed it down to ChatFeed. Moreover, all of those have the same issue, they doesn't clear up the setTimeout or setInterval methods, used inside them.

But, I can't resolve one more same warning. It looks like it comes from ChatEngineWrapper component.

I also tried to check the demo from official git repo (from here) and it has the same warnings. Is it ok ?

[alamorre]

Great question, I've been writing JS apps for like 5 years and I never noticed a crash or serious downside to this warning.

If somebody sends me a link on why it's bad/how to fix it, then I would love to learn / address it 👍

Overall, this won't crash your app though so don't worry!

[eyegates]

Hello,

When I check the code of ConnectionBar which is one component causing this warning, in the useEffect hooks, you need to return a clean up function so that when the component unmounts no more state update will be triggered

The useEffect should look like this

`useEffect(() => {
        if (!didMountRef.current) {
            didMountRef.current = true
            setTimeout(
                () => setIsVisible(true), 
                props.renderDelay ? props.renderDelay : 0
            )
        },
        return () => {
          didMountRef.current = false;
        };
    })`

this should remove this warning. I had this warning hen I get the code from one of your samples and adding the cleanup function in the useEffect removed it.