fix: Invalid memoized context value in Menu (#34121)

components/menu/__tests__/cached-context.test.tsx

@@ -0,0 +1,55 @@
+import React, { memo, useState, useRef, useContext } from 'react';
+import { mount } from 'enzyme';
+import Menu from '../index';
+import MenuContext from '../MenuContext';
+
+// we use'memo' here in order to only render inner component while context changed.
+const CacheInner = memo(() => {
+  const countRef = useRef(0);
+  countRef.current++;
+  // subscribe anchor context
+  useContext(MenuContext);
+  return (
+    <div>
+      Child Rendering Count: <span id="child_count">{countRef.current}</span>
+    </div>
+  );
+});
+
+const CacheOuter = () => {
+  // We use 'useState' here in order to trigger parent component rendering.
+  const [count, setCount] = useState(1);
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+  // During each rendering phase, the cached context value returned from method 'Menu#getMemoizedContextValue' will take effect.
+  // So 'CacheInner' component won't rerender.
+  return (
+    <div>
+      <button type="button" onClick={handleClick} id="parent_btn">
+        Click
+      </button>
+      Parent Rendering Count: <span id="parent_count">{count}</span>
+      <Menu>
+        <Menu.Item key="test">
+          <CacheInner />
+        </Menu.Item>
+      </Menu>
+    </div>
+  );
+};
+
+it("Rendering on Menu without changed MenuContext won't trigger rendering on child component.", () => {
+  const wrapper = mount(<CacheOuter />);
+  const childCount = wrapper.find('#child_count').text();
+  wrapper.find('#parent_btn').at(0).simulate('click');
+  expect(wrapper.find('#parent_count').text()).toBe('2');
+  // child component won't rerender
+  expect(wrapper.find('#child_count').text()).toBe(childCount);
+  wrapper.find('#parent_btn').at(0).simulate('click');
+  expect(wrapper.find('#parent_count').text()).toBe('3');
+  // child component won't rerender
+  expect(wrapper.find('#child_count').text()).toBe(childCount);
+  // in order to depress warning "Warning: An update to Menu inside a test was not wrapped in act(...)."
+  wrapper.unmount();
+});

components/menu/index.tsx

@@ -6,12 +6,12 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import memoize from 'memoize-one';
 import SubMenu, { SubMenuProps } from './SubMenu';
 import Item, { MenuItemProps } from './MenuItem';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer, ConfigConsumerProps, DirectionType } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { SiderContext, SiderContextProps } from '../layout/Sider';
 import collapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
-import MenuContext, { MenuTheme } from './MenuContext';
+import MenuContext, { MenuTheme, MenuContextProps } from './MenuContext';
 import MenuDivider from './MenuDivider';
 
 export { MenuDividerProps } from './MenuDivider';
@@ -66,6 +66,23 @@ class InternalMenu extends React.Component<InternalMenuProps> {
     return inlineCollapsed;
   }
 
+  getMemoizedContextValue = memoize(
+    (
+      cls: string,
+      collapsed: boolean | undefined,
+      the: MenuTheme | undefined,
+      dir: DirectionType,
+      disableMenuItemTitleTooltip: boolean | undefined,
+    ): MenuContextProps => ({
+      prefixCls: cls,
+      inlineCollapsed: collapsed || false,
+      antdMenuTheme: the,
+      direction: dir,
+      firstLevel: true,
+      disableMenuItemTitleTooltip,
+    }),
+  );
+
   renderMenu = ({ getPopupContainer, getPrefixCls, direction }: ConfigConsumerProps) => {
     const rootPrefixCls = getPrefixCls();
 
@@ -91,14 +108,13 @@ class InternalMenu extends React.Component<InternalMenuProps> {
     const menuClassName = classNames(`${prefixCls}-${theme}`, className);
 
     // TODO: refactor menu with function component
-    const contextValue = memoize((cls, collapsed, the, dir, disableMenuItemTitleTooltip) => ({
-      prefixCls: cls,
-      inlineCollapsed: collapsed || false,
-      antdMenuTheme: the,
-      direction: dir,
-      firstLevel: true,
-      disableMenuItemTitleTooltip,
-    }))(prefixCls, inlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip);
+    const contextValue = this.getMemoizedContextValue(
+      prefixCls,
+      inlineCollapsed,
+      theme,
+      direction,
+      _internalDisableMenuItemTitleTooltip,
+    );
 
     return (
       <MenuContext.Provider value={contextValue}>