Menu fails with "Maximum update depth exceeded" on mobile when using new React createRoot API #36559
Description
Reproduction link
Steps to reproduce
Toggle the device simulation to mobile, run the code and click on a menu item
What is expected?
Menu item acts as expected
What is actually happening?
The application blanks out with the React error "Maximum update depth exceeded" in <Overflow>. The logs are as follows,
- Edge
react-dom.development.js:27292 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js:27292:1) at scheduleUpdateOnFiber (react-dom.development.js:25475:1) at dispatchSetState (react-dom.development.js:17527:1) at onVisibleChange (Menu.js:390:1) at updateDisplayCount (Overflow.js:151:1) at Overflow.js:225:1 at commitHookEffectListMount (react-dom.development.js:23150:1) at commitLayoutEffectOnFiber (react-dom.development.js:23268:1) at commitLayoutMountEffects_complete (react-dom.development.js:24688:1) at commitLayoutEffects_begin (react-dom.development.js:24674:1) checkForNestedUpdates @ react-dom.development.js:27292 scheduleUpdateOnFiber @ react-dom.development.js:25475 dispatchSetState @ react-dom.development.js:17527 onVisibleChange @ Menu.js:390 updateDisplayCount @ Overflow.js:151 (anonymous) @ Overflow.js:225 commitHookEffectListMount @ react-dom.development.js:23150 commitLayoutEffectOnFiber @ react-dom.development.js:23268 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651 react-dom.development.js:18687 The above error occurred in the <Overflow> component: at Overflow (http://localhost:3000/static/js/bundle.js:19844:32) at InheritableContextProvider (http://localhost:3000/static/js/bundle.js:17558:23) at http://localhost:3000/static/js/bundle.js:16154:32 at http://localhost:3000/static/js/bundle.js:4078:53 at Menu (http://localhost:3000/static/js/bundle.js:4197:90) at App (http://localhost:3000/static/js/bundle.js:97:80) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651 react-dom.development.js:27292 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js:27292:1) at scheduleUpdateOnFiber (react-dom.development.js:25475:1) at dispatchSetState (react-dom.development.js:17527:1) at onVisibleChange (Menu.js:390:1) at updateDisplayCount (Overflow.js:151:1) at Overflow.js:225:1 at commitHookEffectListMount (react-dom.development.js:23150:1) at commitLayoutEffectOnFiber (react-dom.development.js:23268:1) at commitLayoutMountEffects_complete (react-dom.development.js:24688:1) at commitLayoutEffects_begin (react-dom.development.js:24674:1) checkForNestedUpdates @ react-dom.development.js:27292 scheduleUpdateOnFiber @ react-dom.development.js:25475 dispatchSetState @ react-dom.development.js:17527 onVisibleChange @ Menu.js:390 updateDisplayCount @ Overflow.js:151 (anonymous) @ Overflow.js:225 commitHookEffectListMount @ react-dom.development.js:23150 commitLayoutEffectOnFiber @ react-dom.development.js:23268 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 (anonymous) @ react-dom.development.js:25651 - Firefox
App.js:66 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. React 3 onVisibleChange Menu.js:390 updateDisplayCount Overflow.js:151 Overflow Overflow.js:225 React 13 safeSetState useState.js:29 triggerChange useMergedState.js:83 memoFn useEvent.js:12 onActive Menu.js:215 callback useMemoCallback.js:17 onInternalFocus index.js:171 React 23 js index.js:7 factory react refresh:6 Webpack 3 react-dom.development.js:27292 The above error occurred in the <Overflow> component: Overflow@http://localhost:3000/static/js/bundle.js:19844:26 InheritableContextProvider@http://localhost:3000/static/js/bundle.js:17558:18 ./node_modules/rc-menu/es/Menu.js/Menu<@http://localhost:3000/static/js/bundle.js:16154:26 ./node_modules/antd/es/menu/index.js/InternalMenu<@http://localhost:3000/static/js/bundle.js:4078:53 Menu@http://localhost:3000/static/js/bundle.js:4197:90 App@http://localhost:3000/static/js/bundle.js:97:80 Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:18687 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. React 3 onVisibleChange Menu.js:390 updateDisplayCount Overflow.js:151 Overflow Overflow.js:225 React 13 safeSetState useState.js:29 triggerChange useMergedState.js:83 memoFn useEvent.js:12 onActive Menu.js:215 callback useMemoCallback.js:17 onInternalFocus index.js:171 React 23 js index.js:7 factory react refresh:6 Webpack 3 react-dom.development.js:27292 React 3 dispatchSetState self-hosted:1219 onVisibleChange Menu.js:390 updateDisplayCount Overflow.js:151 Overflow Overflow.js:225 React 8 performSyncWorkOnRoot self-hosted:1162 React 5 dispatchSetState self-hosted:1219 safeSetState useState.js:29 triggerChange useMergedState.js:83 memoFn useEvent.js:12 onActive Menu.js:215 callback useMemoCallback.js:17 onInternalFocus index.js:171 React 15 bind_applyFunctionN self-hosted:1313 dispatchDiscreteEvent self-hosted:1276 React 4 forEach self-hosted:4290 React 4 js index.js:7 factory react refresh:6 Webpack 3 | Environment | Info |
|---|---|
| antd | 4.21.6 |
| React | 18.2.0 |
| System | Windows 10 Enterprise Version 20H2 build 19042.1766 Windows Feature Experience Pack 120.2212.4180.0 |
| Browser | Edge 103.0.1264.62 (64-bit); Firefox 102.0.1 (64-bit) |
The error does not manifest when using the legacy ReactDOM.render API. https://codesandbox.io/s/v4hdil?resolutionWidth=320&resolutionHeight=675