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

[kaiyoma]

We use Ant Design 4.x (which uses this library under the hood) and if we try to click an Ant dropdown inside a unit test, we always get this error:

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 Overflow (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-overflow@1.3.1_react-dom@17.0.2_react@17.0.2\node_modules\rc-overflow\lib\Overflow.js:36:32)
    at InheritableContextProvider (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-menu@9.8.4_react-dom@17.0.2_react@17.0.2\node_modules\rc-menu\lib\context\MenuContext.js:31:23)
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-menu@9.8.4_react-dom@17.0.2_react@17.0.2\node_modules\rc-menu\lib\Menu.js:55:27
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\antd@4.24.15_react-dom@17.0.2_react@17.0.2\node_modules\antd\lib\menu\index.js:42:24
    at Menu (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\antd@4.24.15_react-dom@17.0.2_react@17.0.2\node_modules\antd\lib\menu\index.js:150:37)
    at NoCompactStyle (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\antd@4.24.15_react-dom@17.0.2_react@17.0.2\node_modules\antd\lib\space\Compact.js:41:23)
    at OverrideProvider (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\antd@4.24.15_react-dom@17.0.2_react@17.0.2\node_modules\antd\lib\menu\OverrideContext.js:23:21)
    at div
    at Align (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-align@4.0.15_react-dom@17.0.2_react@17.0.2\node_modules\rc-align\lib\Align.js:47:23)
    at DomWrapper (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-motion@2.9.0_react-dom@17.0.2_react@17.0.2\node_modules\rc-motion\lib\DomWrapper.js:20:34)
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-motion@2.9.0_react-dom@17.0.2_react@17.0.2\node_modules\rc-motion\lib\CSSMotion.js:41:32
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-trigger@5.3.4_react-dom@17.0.2_react@17.0.2\node_modules\rc-trigger\lib\Popup\PopupInner.js:35:23
    at div
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-trigger@5.3.4_react-dom@17.0.2_react@17.0.2\node_modules\rc-trigger\lib\Popup\index.js:32:22
    at C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-util@5.38.0_react-dom@17.0.2_react@17.0.2\node_modules\rc-util\lib\Portal.js:12:25
    at Trigger (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-trigger@5.3.4_react-dom@17.0.2_react@17.0.2\node_modules\rc-trigger\lib\index.js:82:36)
    at Dropdown (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\rc-dropdown@4.0.1_react-dom@17.0.2_react@17.0.2\node_modules\rc-dropdown\lib\Dropdown.js:33:28)
    at Dropdown (C:\Users\kgetz\Work\event-viewer\common\temp\node_modules\.pnpm\antd@4.24.15_react-dom@17.0.2_react@17.0.2\node_modules\antd\lib\dropdown\dropdown.js:30:33)

Glancing at the other open issues, it seems similar to #23.

[uv78]

Same proplem, when the react component is destroyed, a warning will be reported in multiple mode.

version: antd5.14.0;

"rc-select": "^14.11.0",

import { Button } from "antd";
import { useState } from "react";
import PageA from "@/pages/PageA";
import PageB from "@/pages/PageB";

function Home() {

  const [isShow, setShow] = useState(true);
  return <div>
    {isShow ? <PageA/> : <PageB/>}
    <Button onClick={() => {
      setShow(!isShow);
    }}>Play</Button>
  </div>
}

export default Home;

PageA.jsx

import React from "react";
import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';

function PageA(){
  return <div>
    <Select mode={'multiple'}>
      <Option value="jack">jack</Option>
      <Option value="lucy">lucy</Option>
      <Option value="yiminghe">123</Option>
    </Select>
  </div>
}

export default PageA;

[MuLoo]

Same error with Antd@4.24.0

[whittede]

In 2026 can confirm we are seeing this as well when using Antd 4.20.0 any time we use a Select with mode="multiple". Our project is running on React 17.

However, it seems that according to this issue (ant-design/ant-design#53064) and this issue (facebook/react#22114), the warning can be resolved by upgrading the project to React 18 or higher.

In the words of React maintainer gaearon:

The warning states that it protects against memory leaks. The original use case (rewritten to Hooks) goes like this:
If you forget the unsubscribe call, after the component unmounts you'll get a memory leak. So we warn you if you set state after unmounting because we think you might've forgotten to do that.
The problem is that in practice, there's usually a much more common case in the user code:

async function handleSubmit() {
  setPending(true)
  await post('/someapi') // component might unmount while we're waiting
  setPending(false)
}

This will trigger the setState warning. However, there is no actual problem here. There's no "memory leak" here: the POST comes back, we try to set state, the component is unmounted (so nothing happens), and then we're done. Nothing keeps holding onto the component indefinitely.