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

[sgratch]

The following warning appears occasionally for me in few scenarios and not 100% reproduced. Try to run a VM with a snapshot and hot plugged another disk while the VM is starting up:

Another occurrence of this warning appears as follows:

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 OverflowMenu (at VmDetailsActions.js:102)
    in VmDetailsActions (at VmActions/index.js:221)
    in VmActions (at MsgContext.js:12)
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by Context.Consumer)
    in withRouter(Connect(Component)) (at Toolbar/index.js:34)
    in div (created by Context.Consumer)
    in ToolbarGroupWithRef (created by ForwardRef)
    in ForwardRef (at Toolbar/index.js:33)
    in div (created by Context.Consumer)
    in div (created by Context.Consumer)
    in ToolbarContent (at Toolbar/index.js:32)
    in div (created by Context.Consumer)
    in GenerateId (created by Toolbar)
    in Toolbar (at Toolbar/index.js:31) react-dom.development.js:88
    React 6
        printWarning
        error
        warnAboutUpdateOnUnmountedFiberInDEV
        scheduleUpdateOnFiber
        enqueueSetState
        setState
    handleResize OverflowMenu.js:29
    timeout util.js:28
    (Async: setTimeout handler)
    debounce util.js:28
    (Async: EventListener.handleEvent)
    componentDidMount OverflowMenu.js:38
    React 6
        commitLifeCycles
        commitLayoutEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        commitRootImpl
    unstable_runWithPriority scheduler.development.js:653
    React 5
        runWithPriority$1
        commitRoot
        finishSyncRender
        performSyncWorkOnRoot
        flushSyncCallbackQueueImpl
    unstable_runWithPriority scheduler.development.js:653
    React 4
        runWithPriority$1
        flushSyncCallbackQueueImpl
        flushSyncCallbackQueue
        batchedUpdates$1
    Redux 5
        notify
        notifyNestedSubs
        handleChangeWrapper
        dispatch
        sagaMiddleware
    routerMiddleware middleware.js:26
    Redux 4
        dispatch
        wrapSagaDispatch
        runPutEffect
        exec

VM Portal version number: 1.9.1-0

[rszwajko]

Steps to re-create:

1. start VM Portal in small window (below lg breakpoint which is 992 px)
2. check 'resize' event handlers added to window object
3. from VM List screen go to VM Details
4. check again the number of resize event handlers - there should be one new created via debounce()
5. go back to VM List page
6. check resize event handlers - the listener added by debounce() was not removed
7. resize the browser above lg breakpoint - error will be shown

Note that the new listener will be added with every visit to VM Details however error is thrown only first time the invalid state transition is triggered.

The root cause seems to be a bug in OverflowMenu componentWillUnmount() implementation: debounce() produces an anonymous function so the existing handlers accumulate and trigger handleResize() on unmounted component.

https://user-images.githubusercontent.com/64194103/189608610-d4422a5a-0631-4679-8e05-dc231b8032ca.mp4

[sgratch]

@rszwajko can you please open a bug on this for patternfly-react?

[rszwajko]

The PR with the fix has been merged - see https://github.com/patternfly/patternfly-react/pull/7975

[sgratch]

For fixing on web-ui, need to upgrade patternfly/patternfly-react according to the following versions that includes the fix: https://github.com/patternfly/patternfly-react/pull/7975#issuecomment-1252600927