fix(gui): can't perform state update on an unmounted component

[AnsonH]

Description

The following error occur when:

1. Refresh the page and go to pipeline editor
2. Press on "File Structure Validation"
3. Press on "Diff With Skeleton"

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.
    at FileStructureValidationSettings (webpack-internal:///./components/GuiBuilder/StageSettings/FileStructureValidationSettings.tsx:121:110)

Full stacktrace

``` 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. at FileStructureValidationSettings (webpack-internal:///./components/GuiBuilder/StageSettings/FileStructureValidationSettings.tsx:121:110) at LoadableImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:103:38) window.console.error @ next-dev.js?3515:32 overrideMethod @ react_devtools_backend.js:4012 printWarning @ react-dom.development.js?ac89:67 error @ react-dom.development.js?ac89:43 warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js?ac89:23914 scheduleUpdateOnFiber @ react-dom.development.js?ac89:21840 dispatchAction @ react-dom.development.js?ac89:16139 handleStoreChange @ use-sync-external-store-shim.development.js?3e9a:188 dispatch @ redux.js?ebf2:297 e @ VM87126:1 eval @ index.js?62bd:688 eval @ index.js?62bd:1018 eval @ index.js?62bd:906 eval @ index.js?511b:20 eval @ index.js?62bd:1005 dispatch @ VM87126:1 actionCreator @ index.js?62bd:782 updateNodesAndEdgesSelections @ index.js?139d:1888 addSelectedNodes @ index.js?139d:3189 handleNodeClick @ index.js?139d:1361 eval @ index.js?139d:1410 call @ dispatch.js?bb82:57 gesture @ drag.js?ac8f:148 mousedowned @ drag.js?ac8f:62 eval @ on.js?c2d6:3 ```

https://user-images.githubusercontent.com/57580593/210126456-3477906a-6da5-436c-9953-dbae215da2f9.mp4

Fatal Error

Occasionally the entire app may crash because useSelectedStageConfig() returns an undefined config.

Investigation

See easy-peasy issue #306

• This error is likely caused by unmounting a stage settings panel that uses useSelectedStageConfig()
  • e.g. Suppose FileStructureValidation is empty and DiffWithSkeleton uses that hook.
  • ✅ None -> File -> Diff
  • ❌ None -> Diff -> File
• Order:
  1. action.onStageNodeChange
  2. Warning: can't perform ...
  3. Runs useSelectedStageConfig()

The error persists if:

• Copy the code in useSelectedStageConfig() into the stage settings panel (so directly use the store's selectedStage state
• Statically import the stage settings panel component instead of dynamic import

Debugging

1. Click on "File Structure Validation"
2. Place breakpoint at react-dom.development.js:23914
3. Press on "Diff With Skeleton"

4. Inspect call stack of the error --> actionCreator --> See payload is from the onStageNodesChange()

   

Workaround

This stack overflow answer suggests that the warning may be a false positive.

A suggestion is to make useSelectedStageConfig()'s return value nullable.

[AnsonH]

A workaround is implemented by allowing useSelectedStageConfig() hook to return undefined, and checking whether config is falsy in the stage settings panel. This should theoretically solve the randomly-occurring TypeError bug.

While the "can't perform state update" warning still persists, we may ignore the warning. This is because it's very difficult to locate the exact reason why this error occurs.