refactor: rm useDestroy hook (#34418)

components/_util/ActionButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import useState from 'rc-util/lib/hooks/useState';
 import Button from '../button';
 import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
-import useDestroyed from './hooks/useDestroyed';
 
 export interface ActionButtonProps {
   type?: LegacyButtonType;
@@ -21,8 +21,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
 const ActionButton: React.FC<ActionButtonProps> = props => {
   const clickedRef = React.useRef<boolean>(false);
   const ref = React.useRef<any>();
-  const isDestroyed = useDestroyed();
+  const [loading, setLoading] = useState<ButtonProps['loading']>(false);
-  const [loading, setLoading] = React.useState<ButtonProps['loading']>(false);
 
   React.useEffect(() => {
     let timeoutId: any;
@@ -45,9 +44,7 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
     setLoading(true);
     returnValueOfOnOk!.then(
       (...args: any[]) => {
-        if (!isDestroyed()) {
+        setLoading(false, true);
-          setLoading(false);
-        }
         close(...args);
         clickedRef.current = false;
       },
@@ -56,9 +53,7 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
         // eslint-disable-next-line no-console
         console.error(e);
         // See: https://github.com/ant-design/ant-design/issues/6183
-        if (!isDestroyed()) {
+        setLoading(false, true);
-          setLoading(false);
-        }
         clickedRef.current = false;
       },
     );

components/_util/__tests__/useDestroyed.test.js

@@ -1,20 +0,0 @@
-import { mount } from 'enzyme';
-import React from 'react';
-import useDestroyed from '../hooks/useDestroyed';
-
-describe('useMounted', () => {
-  it('should work properly', () => {
-    let isDestroyed = null;
-
-    const AutoUnmounted = () => {
-      isDestroyed = useDestroyed();
-
-      return <div>Mounted</div>;
-    };
-
-    const wrapper = mount(<AutoUnmounted />);
-    expect(isDestroyed()).toBeFalsy();
-    wrapper.unmount();
-    expect(isDestroyed()).toBeTruthy();
-  });
-});

components/_util/hooks/useDestroyed.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-export default function useDestroyed() {
-  const mountedRef = React.useRef<boolean>(true);
-
-  React.useEffect(
-    () => () => {
-      mountedRef.current = false;
-    },
-    [],
-  );
-
-  return () => !mountedRef.current;
-}

components/page-header/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import useState from 'rc-util/lib/hooks/useState';
 import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
 import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
 import ResizeObserver from 'rc-resize-observer';
@@ -9,7 +10,6 @@ import Breadcrumb, { BreadcrumbProps } from '../breadcrumb';
 import Avatar, { AvatarProps } from '../avatar';
 import TransButton from '../_util/transButton';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import useDestroyed from '../_util/hooks/useDestroyed';
 
 export interface PageHeaderProps {
   backIcon?: React.ReactNode;
@@ -121,12 +121,9 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => (
 );
 
 const PageHeader: React.FC<PageHeaderProps> = props => {
-  const [compact, updateCompact] = React.useState(false);
+  const [compact, updateCompact] = useState(false);
-  const isDestroyed = useDestroyed();
   const onResize = ({ width }: { width: number }) => {
-    if (!isDestroyed()) {
+    updateCompact(width < 768, true);
-      updateCompact(width < 768);
-    }
   };
   return (
     <ConfigConsumer>

components/popconfirm/index.tsx

@@ -13,7 +13,6 @@ import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue'
 import { cloneElement } from '../_util/reactNode';
 import { getTransitionName } from '../_util/motion';
 import ActionButton from '../_util/ActionButton';
-import useDestroyed from '../_util/hooks/useDestroyed';
 
 export interface PopconfirmProps extends AbstractTooltipProps {
   title: React.ReactNode | RenderFunction;
@@ -49,15 +48,13 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
     defaultValue: props.defaultVisible,
   });
 
-  const isDestroyed = useDestroyed();
+  // const isDestroyed = useDestroyed();
 
   const settingVisible = (
     value: boolean,
     e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => {
-    if (!isDestroyed()) {
+    setVisible(value, true);
-      setVisible(value);
-    }
     props.onVisibleChange?.(value, e);
   };
 

package.json

@@ -152,7 +152,7 @@
     "rc-tree-select": "~5.1.1",
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
-    "rc-util": "^5.19.2",
+    "rc-util": "^5.19.3",
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {