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

Activity

1. uv78 commented on Feb 8, 2024

   

   uv78

   on Feb 8, 2024

   Last edited by uv78

   More actions

   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;
   

   
2. MuLoo commented on Mar 21, 2024

   

   MuLoo

   on Mar 21, 2024

   More actions

   Same error with Antd@4.24.0
3. whittede commented on Mar 26, 2026

   

   whittede

   on Mar 26, 2026

   More actions

   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 (react/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.
4. EduardoAC commented on Oct 19, 2026

   

   EduardoAC

   on Oct 19, 2026

   More actions

   We can reproduce this with React 16.14.0, Ant Design 5.18.3, and rc-overflow 1.5.0 while mounting and unmounting an inline navigation Menu in a Finance integration test.

   

   The warning stack points to Overflow. On unmount, an Overflow item’s cleanup calls registerSize(itemKey, null). That queues an update through useEffectState’s MessageChannel batcher. If the parent has unmounted before the batch runs, it calls setState on the unmounted component.

   A possible fix is to guard the queued state update with a mounted ref, or cancel pending updates when Overflow unmounts. For example:

   const mountedRef = React.useRef(true);
   
   React.useEffect(() => () => {
     mountedRef.current = false;
   }, []);
   
   notifyEffectUpdate(() => {
     if (mountedRef.current) {
       setStateValue(nextValue);
     }
   });

   This guard removed the warning in our integration test while keeping the real Menu and SideNav mounted.