search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.55k stars 1.33k forks source link

[charts] hovering over charts causes 'maximum update depth exceeded' error #13450

Open prolink007 opened 5 months ago

prolink007 commented 5 months ago

Steps to reproduce

Referencing this example from the documentation.

Here is the provided stackblitz from the documentation.

I am using chrome 125.0.6422.142.

Steps:

  1. Load the stackblitz.
  2. Move your cursor across the chart slowly for several seconds, letting the data load into the popup. And keep moving the cursor around the chart to load other popups. Notice the 'depth exceeded' error coming up randomly while moving your cursor. Vary the speeds of movement, fast and slow.

Current behavior

Moving your cursor across the chart causes the 'depth exceeded' error to come up.

Expected behavior

No 'depth exceeded' error to come up while hovering.

Context

Trying to avoid the error.

Your environment

npx @mui/envinfo ``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.14.0 - ~\AppData\Local\fnm_multishells\14264_1718114663323\node.EXE npm: 10.7.0 - ~\AppData\Local\fnm_multishells\14264_1718114663323\npm.CMD pnpm: Not Found Browsers: Chrome: 125.0.6422.142 Edge: Chromium (125.0.2535.92) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.19 @mui/icons-material: ^5.15.18 => 5.15.19 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.18 => 5.15.19 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-charts: ^7.6.2 => 7.6.2 @mui/x-data-grid: ^7.6.2 => 7.6.2 @mui/x-date-pickers: ^7.6.2 => 7.6.2 @types/react: 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: 4.9.5 ```

Search keywords: depth exceeded

michelengelen commented 5 months ago

Hey @prolink007 I cannot reproduce the issue with the given steps. Could you try to replicate this in a stackblitz demo that throws this error more consistently? Or test this a bit more with better steps to reproduce? Thanks!

prolink007 commented 5 months ago

Hey @prolink007 I cannot reproduce the issue with the given steps. Could you try to replicate this in a stackblitz demo that throws this error more consistently? Or test this a bit more with better steps to reproduce? Thanks!

@michelengelen

I provided two links. One is to the documentation. Just follow that link. Click on the stackblitz for the using a dataset section. Let the stack load. Then open inspection. Make sure it is docked to the window. Then start hovering around the data inside the chart. It does not start immediately. You have to do it for a few seconds. Then it will start showing up more frequently.

Here is a screen shot of what i am seeing. I can provide a video, if needed.

image

michelengelen commented 5 months ago

Thanks @prolink007 I can reproduce it now. @JCQuintas I guess this comes from constantly updating the position with translate. WDYT?

prolink007 commented 5 months ago

Thanks @prolink007 I can reproduce it now. @JCQuintas I guess this comes from constantly updating the position with translate. WDYT?

@michelengelen I can get this to happen on almost all the chart types in my code. I just thought it would be easier to use the stackblitz that was in the documentation to demonstrate. Hope that helps. 🤷

JCQuintas commented 5 months ago

@michelengelen yeah it seems to be an issue in how we calculate the Popper position. Though it only seems to appear in development, probably because the prod bundle is more optimised.

JCQuintas commented 5 months ago

Managed to get a more specific error

hydration-error-info.js:50 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at PopperTooltip (webpack-internal:///../node_modules/.pnpm/@mui+base@5.0.0-beta.40_@types+react@18.2.60_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@mui/base/Popper/Popper.js:72:7)
    at Portal (webpack-internal:///../node_modules/.pnpm/@mui+base@5.0.0-beta.40_@types+react@18.2.60_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@mui/base/Portal/Portal.js:39:5)
    at Popper (webpack-internal:///../node_modules/.pnpm/@mui+base@5.0.0-beta.40_@types+react@18.2.60_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@mui/base/Popper/Popper.js:203:7)
    at eval (webpack-internal:///../node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at NoSsr (webpack-internal:///../node_modules/.pnpm/@mui+base@5.0.0-beta.40_@types+react@18.2.60_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@mui/base/NoSsr/NoSsr.js:38:5)
    at ChartsTooltip (webpack-internal:///../packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx:74:89)
    at svg
    at eval (webpack-internal:///../node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at ChartsSurface (webpack-internal:///../packages/x-charts/src/ChartsSurface.tsx:33:7)
    at HighlightedProvider (webpack-internal:///../packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx:42:3)
    at InteractionProvider (webpack-internal:///../packages/x-charts/src/context/InteractionProvider.tsx:69:5)
    at CartesianContextProvider (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx:26:58)
    at CartesianContextProviderReal (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx:62:12)
    at CartesianContextProviderPro (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx:28:58)
    at SeriesContextProvider (webpack-internal:///../packages/x-charts/src/context/SeriesContextProvider.tsx:72:5)
    at ColorProvider (webpack-internal:///../packages/x-charts/src/context/ColorProvider.tsx:19:5)
    at DrawingProvider (webpack-internal:///../packages/x-charts/src/context/DrawingProvider.tsx:47:5)
    at ZoomProviderReal (webpack-internal:///../packages/x-charts/src/context/ZoomProvider/ZoomProvider.tsx:35:3)
    at ZoomProvider (webpack-internal:///../packages/x-charts/src/context/ZoomProvider/ZoomProvider.tsx:17:3)
    at ChartContainer (webpack-internal:///../packages/x-charts/src/ChartContainer/ChartContainer.tsx:45:5)
    at div
    at eval (webpack-internal:///../node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at ResponsiveChartContainer (webpack-internal:///../packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx:49:14)
    at LineChart (webpack-internal:///../packages/x-charts/src/LineChart/LineChart.tsx:59:5)
    at div
    at eval (webpack-internal:///../node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at Box (webpack-internal:///../node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/createBox.js:37:72)
    at BarsDataset
    at RtlProvider (webpack-internal:///../node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/RtlProvider/index.js:22:7)
    at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@mui+private-theming@5.15.14_@types+react@18.2.60_react@18.2.0/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:43:5)
    at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:56:5)
    at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@mui+material@5.15.19_@emotion+react@11.11.4_@types+react@18.2.60_react@18.2.0__@emotion+styl_r36f54zqraypp6ktpuggujlhem/node_modules/@mui/material/styles/ThemeProvider.js:27:14)
    at Layout (webpack-internal:///./pages/playground/components/Layout.tsx:55:21)
    at Page
    at Ge (webpack-internal:///../node_modules/.pnpm/styled-components@6.1.11_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/styled-components/dist/styled-components.browser.esm.js:30:16024)
    at StyledEngineProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/docs/src/modules/utils/StyledEngineProvider.js:40:5)
    at CodeVariantProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/docs/src/modules/utils/codeVariant.js:55:5)
    at CodeCopyProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/CodeCopy/CodeCopy.tsx:181:3)
    at TranslationsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:35:3)
    at UserLanguageProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:72:5)
    at DocsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/DocsProvider/DocsProvider.tsx:19:3)
    at AppWrapper (webpack-internal:///./pages/_app.js:182:5)
    at MyApp (webpack-internal:///./pages/_app.js:403:5)
    at PathnameContextProviderAdapter (webpack-internal:///../node_modules/.pnpm/next@14.2.3_@babel+core@7.24.7_@opentelemetry+api@1.8.0_@playwright+test@1.44.1_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/shared/lib/router/adapters.js:89:7)
    at ErrorBoundary (webpack-internal:///../node_modules/.pnpm/next@14.2.3_@babel+core@7.24.7_@opentelemetry+api@1.8.0_@playwright+test@1.44.1_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/components/react-dev-overlay/pages/ErrorBoundary.js:43:5)
    at ReactDevOverlay (webpack-internal:///../node_modules/.pnpm/next@14.2.3_@babel+core@7.24.7_@opentelemetry+api@1.8.0_@playwright+test@1.44.1_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/components/react-dev-overlay/pages/ReactDevOverlay.js:34:5)
    at Container (webpack-internal:///../node_modules/.pnpm/next@14.2.3_@babel+core@7.24.7_@opentelemetry+api@1.8.0_@playwright+test@1.44.1_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:80:1)
    at AppContainer (webpack-internal:///../node_modules/.pnpm/next@14.2.3_@babel+core@7.24.7_@opentelemetry+api@1.8.0_@playwright+test@1.44.1_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:191:5)
    at Root (webpack-internal:///../node_modules/.pnpm/next@14.2.3_@babel+core@7.24.7_@opentelemetry+api@1.8.0_@playwright+test@1.44.1_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:423:5)
console.error @ hydration-error-info.js:50
window.console.error @ setup-hydration-warning.js:16
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
checkForNestedUpdates @ react-dom.development.js:27295
scheduleUpdateOnFiber @ react-dom.development.js:25470
dispatchSetState @ react-dom.development.js:17527
handlePopperUpdate @ Popper.js:119
fn @ Popper.js:146
forceUpdate @ createPopper.js:143
eval @ Popper.js:106
commitHookEffectListMount @ react-dom.development.js:23145
commitPassiveMountOnFiber @ react-dom.development.js:24921
commitPassiveMountEffects_complete @ react-dom.development.js:24886
commitPassiveMountEffects_begin @ react-dom.development.js:24873
commitPassiveMountEffects @ react-dom.development.js:24861
flushPassiveEffectsImpl @ react-dom.development.js:27034
flushPassiveEffects @ react-dom.development.js:26979
eval @ react-dom.development.js:26764
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
jwitthaus commented 3 months ago

I'm having the same issue with maximum update depth exceeded? Is there already any solution?

Firgrep commented 3 months ago

Same here image

jMoulis commented 2 months ago

I got the same pb.

DonikaV commented 1 month ago

Same here Image