fix: path register & add use hooks (#395)

* fix: path register & add use hooks

* test: Update snasphot

Author: zombieJ

src/Menu.tsx

@@ -53,7 +53,7 @@ export interface MenuProps
   children?: React.ReactNode;
 
   disabled?: boolean;
-  /** Disable auto overflow */
+  /** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
   disabledOverflow?: boolean;
 
   /** direction of menu */
@@ -225,9 +225,8 @@ const Menu: React.FC<MenuProps> = props => {
   });
 
   // >>>>> Cache & Reset open keys when inlineCollapsed changed
-  const [inlineCacheOpenKeys, setInlineCacheOpenKeys] = React.useState(
-    mergedOpenKeys,
-  );
+  const [inlineCacheOpenKeys, setInlineCacheOpenKeys] =
+    React.useState(mergedOpenKeys);
 
   const isInlineMode = mergedMode === 'inline';
 
@@ -275,9 +274,10 @@ const Menu: React.FC<MenuProps> = props => {
     [registerPath, unregisterPath],
   );
 
-  const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [
-    isSubPathKey,
-  ]);
+  const pathUserContext = React.useMemo(
+    () => ({ isSubPathKey }),
+    [isSubPathKey],
+  );
 
   React.useEffect(() => {
     refreshOverflowKeys(

src/hooks/useKeyRecords.ts

@@ -11,11 +11,18 @@ const getPathKeys = (keyPathStr: string) => keyPathStr.split(PATH_SPLIT);
 export const OVERFLOW_KEY = 'rc-menu-more';
 
 export default function useKeyRecords() {
-  const [, forceUpdate] = React.useState({});
+  const [, internalForceUpdate] = React.useState({});
   const key2pathRef = useRef(new Map<string, string>());
   const path2keyRef = useRef(new Map<string, string>());
   const [overflowKeys, setOverflowKeys] = React.useState([]);
   const updateRef = useRef(0);
+  const destroyRef = useRef(false);
+
+  const forceUpdate = () => {
+    if (!destroyRef.current) {
+      internalForceUpdate({});
+    }
+  };
 
   const registerPath = useCallback((key: string, keyPath: string[]) => {
     // Warning for invalidate or duplicated `key`
@@ -36,7 +43,7 @@ export default function useKeyRecords() {
 
     nextSlice(() => {
       if (id === updateRef.current) {
-        forceUpdate({});
+        forceUpdate();
       }
     });
   }, []);
@@ -100,6 +107,13 @@ export default function useKeyRecords() {
     return pathKeys;
   }, []);
 
+  React.useEffect(
+    () => () => {
+      destroyRef.current = true;
+    },
+    [],
+  );
+
   return {
     // Register
     registerPath,

src/index.ts

@@ -2,8 +2,12 @@ import Menu, { MenuProps } from './Menu';
 import MenuItem, { MenuItemProps } from './MenuItem';
 import SubMenu, { SubMenuProps } from './SubMenu';
 import MenuItemGroup, { MenuItemGroupProps } from './MenuItemGroup';
+import { useFullPath as useOriginFullPath } from './context/PathContext';
 import Divider from './Divider';
 
+/** @private Only used for antd internal. Do not use in your production. */
+const useFullPath = useOriginFullPath;
+
 export {
   SubMenu,
   MenuItem as Item,
@@ -15,6 +19,7 @@ export {
   SubMenuProps,
   MenuItemProps,
   MenuItemGroupProps,
+  useFullPath,
 };
 
 type MenuType = typeof Menu & {

tests/Menu.spec.js

@@ -521,5 +521,23 @@ describe('Menu', () => {
 
     expect(wrapper.exists('.rc-menu-submenu-active')).toBeTruthy();
   });
+
+  it('not warning on destroy', async () => {
+    const errorSpy = jest.spyOn(console, 'error');
+
+    const wrapper = mount(
+      <Menu>
+        <MenuItem key="bamboo">Bamboo</MenuItem>
+      </Menu>,
+    );
+
+    wrapper.unmount();
+
+    await Promise.resolve();
+
+    expect(errorSpy).not.toHaveBeenCalled();
+
+    errorSpy.mockRestore();
+  });
 });
 /* eslint-enable */

tests/__snapshots__/Responsive.spec.tsx.snap

@@ -45,7 +45,7 @@ Array [
       aria-hidden="true"
       class="rc-menu-overflow-item rc-menu-overflow-item-rest rc-menu-submenu rc-menu-submenu-horizontal"
       role="none"
-      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none"
+      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
     >
       <div
         aria-expanded="false"