[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized`

[laurisvan]

Duplicates

• [X] I have searched the existing issues

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open a page that has a DataGrid component with several column definitions

Current behavior 😯

Error: Maximum Call Stack Size exceeded

Expected behavior 🤔

No exception

Context 🔦

My sincere apologies that I am not able to provide good steps to repeat, as this problem only repeats on select end users that are non-technical ones. I can only see their blank screens in error reports, and this error in our TrackJS console (screenshot attached) which only tells that it has something to do with memoization calls.

I suspect it might have something to do with memoization of the fields and possible re-renderings. The DataGrids where the problem occurs, do have unique 'field' attributes within the columns, but I suspect there might be multiple DataGrids (having some conflicting field names) alive at the same time.

I am willing to upgrade to the latest MUI if there is even a slightest hint that something related to similar errors have been fixed since @mui/x-data-grid-premium: 6.9.0 (I am aware that there is one Maximum Call Stack Size Exceeded fix in 6.9.1. but I think it is unrelated as it dealt with fractional field widths).

I am willing to hunt for more information and try different things - please kindly give some tips on where to start the hunt.

Your environment 🌎

npx @mui/envinfo

``` Note: I am not able to repeat this problem personally. This problem only appears for some of our users, using a variant of Chrome on Windows (unfortunately I do not know the exact versions, but they are recent). System: OS: macOS 12.6 Binaries: Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node Yarn: Not Found npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm Browsers: Chrome: 120.0.6099.109 Edge: Not Found Safari: 16.1 npmPackages: @emotion/react: 11.10.5 @emotion/styled: 11.10.5 @mui/base: 5.0.0-alpha.106 @mui/core-downloads-tracker: 5.10.14 @mui/icons-material: 5.10.14 @mui/lab: 5.0.0-alpha.153 @mui/material: 5.10.14 @mui/private-theming: 5.14.18 @mui/styled-engine: 5.14.18 @mui/system: 5.14.18 @mui/types: 7.2.9 @mui/utils: 5.14.18 @mui/x-data-grid: 6.9.0 @mui/x-data-grid-premium: 6.9.0 @mui/x-data-grid-pro: 6.9.0 @mui/x-date-pickers: 5.0.8 @mui/x-date-pickers-pro: 5.0.8 @mui/x-license-pro: 6.9.0 @types/react: 18.0.25 react: 18.2.0 react-dom: 18.2.0 typescript: ^5.2.2 => 5.2.2 ```

Search keywords:

[michelengelen]

Hey @laurisvan ... thanks for raising this. It is indeed a bit strange to see that error.

From your description it is not an easy task to determine where to initially look for tbh. I will loop in our team here to see if we can find a solution for you soon.

@MBilalShafi or @romgrk Could you maybe have a hint or encountered this before?

[romgrk]

No, we don't have enough information here. We'd need to at least be able to see the code to better assess what's causing it. It would also be nice to have the full stack traces, that could also tell us what's causing it.

[laurisvan]

The innermost wrapper before DataGrid is as follows. The whole component structure is quite deep, so I am not sure how much more I can give without making the set of examples exhaustive:

import { GridColDef } from '@mui/x-data-grid-premium'

import { translate } from '$lib/locale'
import { formatDate } from '$lib/util/timeFormattingUtils'
import { DataGrid } from '$widgets/utils/DataGrid/DataGrid'
type RelationsListGridProps = {
  relationsList: { id: string; name: string; startsAt?: string; endsAt?: string | null }[]
  onCellClick: (relation: any) => void
}

export default function RelationsListGrid(props: RelationsListGridProps): React.ReactElement {
  const columns: GridColDef[] = [
    {
      field: 'name',
      headerName: translate('generic.name'),
      flex: 1,
      valueGetter: (params) => params.row.name
    },
    {
      field: 'parentName',
      headerName: translate('profile-details.dimension'),
      flex: 1,
      valueGetter: (params) => params.row.parentName
    },
    {
      field: 'startsAt',
      headerName: translate('generic.startsAt'),
      width: 150,
      valueGetter: (params) => formatDate(params.row.startsAt as string, { displayYear: true })
    },
    {
      field: 'endsAt',
      headerName: translate('generic.endsAt'),
      width: 150,
      valueGetter: (params) => formatDate(params.row.endsAt, { displayYear: true, renderAsExclusiveEndDate: true })
    },
    {
      field: 'selfEditable',
      headerName: translate('generic.selfEditable'),
      width: 150,
      valueGetter: (params) => (params.row.selfEditable ? translate('boolean.true') : '')
    }
  ]

  return (
    <DataGrid
      disableMultipleRowSelection
      checkboxSelection={false}
      onCellClick={props.onCellClick}
      columns={columns}
      rows={props.relationsList}
      initialState={undefined}
    />
  )
}

The whole widget tree is exhaustive, but I'll try to provide some bits from above and below the graph, just in case the structure gave any hints.

[romgrk]

I don't see anything unusual. Next step would be to get a full stack trace, including line numbers, so we can pinpoint where it's going wrong. The interesting data isn't just the last entry, it's the entries leading to the stack overflow.

[laurisvan]

Unfortunately I am not able to extract full stack trace, as TrackJS only provides a few traces. As soon as I am able to repeat the problem myself, I could give full information.

I am not sure if it gives any more insight, but all the reported browsers are Windows 10 Chromes, with either version 120.0 or 119.0. One of the users confirmed this does not repeat on Edge browser on the same Windows machine.

Here's what I am able to give:

obj ../../../node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js 23:10
Showing original source content from sourcemap
 if (visibility === 'public') {
   publicApi[methodName] = methods[methodName];
 } else {
   privateOnlyApi[methodName] = methods[methodName];
 }
 });
 };
 const handler = {
     get: (obj, prop) => {
       if (prop in obj) {
         return obj[prop];
       }
       return privateOnlyApi[prop];
     },
     set: (obj, prop, value) => {
         obj[prop] = value;
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js 28:68
Showing original source content from sourcemap
 return false;
 }
 let ignoreSetState = false;

 // Apply the control state constraints
 const updatedControlStateIds = [];
 Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
       const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
       const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
       updatedControlStateIds.push({
             stateId: controlState.stateId,
             hasPropChanged: newSubState !== controlState.propModel
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js 26:44
Showing original source content from sourcemap
 }
 if (apiRef.current.state === newState) {
   return false;
 }
 let ignoreSetState = false;

 // Apply the control state constraints
 const updatedControlStateIds = [];
 Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
       const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
       const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
       updatedControlStateIds.push({
fn ../../../node_modules/@mui/x-data-grid/hooks/utils/useGridApiMethod.js 14:19
Showing original source content from sourcemap
 if (!privateApiRef.current) {
   return;
 }
 apiMethodsNames.forEach(methodName => {
   if (!privateApiRef.current.hasOwnProperty(methodName)) {
     privateApiRef.current.register(visibility, {
       [methodName]: (...args) => {
         const fn = apiMethodsRef.current[methodName];
         return fn(...args);
       }
     });
   }
 });
 }, [apiMethodsNames, privateApiRef, visibility]);
 React.useEffect(() => {
       apiMethodsRef.current = apiMethods;
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js 48:19
Showing original source content from sourcemap
 stateId: 'visibleColumns',
   propModel: props.columnVisibilityModel,
   propOnChange: props.onColumnVisibilityModelChange,
   stateSelector: gridColumnVisibilityModelSelector,
   changeEvent: 'columnVisibilityModelChange'
 });
 const setGridColumnsState = React.useCallback(columnsState => {
   logger.debug('Updating columns state.');
   apiRef.current.setState(mergeColumnsState(columnsState));
   apiRef.current.forceUpdate();
   apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
 }, [logger, apiRef]);

 /**
  * API METHODS
  */
setGridColumnsState ../../../node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js 249:6
Showing original source content from sourcemap
 /**
  * EVENTS
  */
 const prevInnerWidth = React.useRef(null);
 const handleGridSizeChange = viewportInnerSize => {
   if (prevInnerWidth.current !== viewportInnerSize.width) {
     prevInnerWidth.current = viewportInnerSize.width;
     setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), viewportInnerSize.width));
   }
 };
 useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);

 /**
  * APPLIERS
  */
SNe.p ../../../node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js 33:92
Showing original source content from sourcemap
 const subscription = React.useRef(null);
 const handlerRef = React.useRef();
 handlerRef.current = handler;
 const cleanupTokenRef = React.useRef(null);
 if (!subscription.current && handlerRef.current) {
   const enhancedHandler = (params, event, details) => {
     if (!event.defaultMuiPrevented) {
       var _handlerRef$current;
       (_handlerRef$current = handlerRef.current) == null ? void 0 : _handlerRef$current.call(handlerRef, params, event, details);
     }
   };
   subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
   cleanupTokensCounter += 1;
   cleanupTokenRef.current = {
     cleanupToken: cleanupTokensCounter
   };
SNe.emit ../../../node_modules/@mui/x-data-grid/utils/EventManager.js 57:17
Showing original source content from sourcemap
 const listener = highPriorityListeners[i];
 if (collection.highPriority.has(listener)) {
   listener.apply(this, args);
 }
 }
 for (let i = 0; i < regularListeners.length; i += 1) {
   const listener = regularListeners[i];
   if (collection.regular.has(listener)) {
     listener.apply(this, args);
   }
 }
 }
 once(eventName, listener) {
     // eslint-disable-next-line consistent-this
     const that = this;
     this.on(eventName, function oneTimeListener(...args) {
{anonymous} ../../../node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js 67:39
Showing original source content from sourcemap
 const [name, params, event = {}] = args;
 event.defaultMuiPrevented = false;
 if (isSyntheticEvent(event) && event.isPropagationStopped()) {
   return;
 }
 const details = props.signature === GridSignature.DataGridPro ? {
   api: privateApiRef.current.getPublicApi()
 } : {};
 privateApiRef.current.eventManager.emit(name, params, event, details);
 }, [privateApiRef, props.signature]);
 const subscribeEvent = React.useCallback((event, handler, options) => {
       privateApiRef.current.eventManager.on(event, handler, options);
       const api = privateApiRef.current;
       return () => {
         api.eventManager.removeListener(event, handler);
       };

[michelengelen]

@mui/xgrid do we have someone with a similar setup (windows 10, chrome v119 or v120 and edge) to test this?

[romgrk]

I could boot in windows 11 to try it.

@laurisvan I just noticed that you're on an older version of the grid, could you try the latest 6.x version?

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[laurisvan]

We just got fresh insight from the problem and actually managed to fix the problem. When checking the problem, we had multiple nested overflowing items (causing multiple nested scrollbars). We anticipated the triple scrollbars were the cause of the problem, and fixed them. As a result, the problem no longer appears.

If you are interested, I can try to fish for more information. I believe it is still related to MUI, but not specifically to DataGrid.

[romgrk]

If you find more detailed information you can post here or in the main MUI repository if applicable, but it's also fine to close it and wait until someone has a clear & reproducible case.

[kavitang]

Also facing this after migrating to v7. It happens on a few pages in the app, and there are two places where this error is being thrown

Error 1

eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/gridSortingSelector.js (14:54)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (64:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (63:0)
applySelector
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (12:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (39:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Set.forEach
<anonymous>
Store.update
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Object.eval [as setState]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js (55:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (65:0)
eval
node_modules/@mui/utils/useEventCallback/useEventCallback.js (18:17)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (189:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as updateDimensions]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid-pro/esm/hooks/features/detailPanel/useGridDetailPanel.js (155:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as applySorting]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (102:0)
Object.eval [as setSortModel]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (111:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (221:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)

Error 2 trace

gridVisibleRowsLookupSelector
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/filter/gridFilterSelector.js (27:7)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
dependenciesChecker
(app-pages-browser)/node_modules/reselect/es/index.js (77:0)
memoized
(app-pages-browser)/node_modules/reselect/es/defaultMemoize.js (123:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (91:0)
selector
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/createSelector.js (63:0)
applySelector
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (12:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridSelector.js (39:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Set.forEach
<anonymous>
Store.update
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/Store.js (19:0)
Object.eval [as setState]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridStateInitialization.js (55:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (65:0)
eval
node_modules/@mui/utils/useEventCallback/useEventCallback.js (18:17)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (189:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (51:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as updateDimensions]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/dimensions/useGridDimensions.js (191:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid-pro/esm/hooks/features/detailPanel/useGridDetailPanel.js (155:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
Object.eval [as applySorting]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (102:0)
Object.eval [as setSortModel]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (111:0)
Object.eval [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/sorting/useGridSorting.js (221:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)
eval
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (46:0)
Object.handleGridSizeChange [as current]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/features/columns/useGridColumns.js (247:0)
EventManager.enhancedHandler
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/utils/useGridApiEventHandler.js (59:0)
EventManager.emit
(app-pages-browser)/node_modules/@mui/x-data-grid/utils/EventManager.js (57:0)
Object.eval [as publishEvent]
(app-pages-browser)/node_modules/@mui/x-data-grid/hooks/core/useGridApiInitialization.js (88:0)

Not able to replicate this yet, as our app serves a lot of settings dynamically in the Datagrid, but this issue has only occured after migrating to v7. I'll try and create a sandbox for this, but I wanted to add this is not resolved. If I should open a new issue for this please let me know I will do so.

[romgrk]

@kavitang Could you provide a reproduction case?

https://stackblitz.com/fork/github/mui/mui-x/tree/master/bug-reproductions/x-data-grid

[jameslibertas]

+1 on this error. It started happening out of the blue today for me.

gridFilterSelector.js:27 Uncaught RangeError: Maximum call stack size exceeded at gridVisibleRowsLookupSelector (gridFilterSelector.js:27:1) at dependenciesChecker (index.js:77:1) at memoized (defaultMemoize.js:123:1) at selector (createSelector.js:91:1) at dependenciesChecker (index.js:77:1) at memoized (defaultMemoize.js:123:1) at selector (createSelector.js:91:1) at selector (createSelector.js:63:1) at applySelector (useGridSelector.js:12:1) at useGridSelector.js:39:1

From experimenting with it the vertical viewing range of the grid is a factor. Depending on the height grid when the browser is made shorter or taller the error will manifest. If I make the grid smaller the error will show up. If I make the browser taller and the grid expands, the error may not manifest.

Once you pass the threshold where the vertical height will need a scroll bar the error will occur.

[kavitang]

@romgrk - It is very hard to create a reproduction of this as the data grid in our app has a lot of dynamic properties. The one area I was able to narrow down here was to remove the setting of the sortModel. In the app, we fetch some config and then set sortModel after a delay (we also set the columns dynamically multiple times depending on different config). Removing this caused the error to go away, but I'm not able to replicate this issue in a sandbox. I'll give it another try and post back in a day or so.

[sorinpav]

We're affected by this issue as well, and it's the sortModel that causes it for us as well.

We use both server-side and client-side sorting, depending on different scenarios we have in our product.

I see it being a problem only when doing server-side sorting, and only when removing the previously used sorting filter.

e.g. Say you have a "First Name" column that uses server side sorting.
First click on the arrow in the column header - sort by First Name ascending - sorting works all fine Second click - sort by First Name descending - sorting works all fine Third click - get back to unsorted values - error shows and project breaks (maximum call stack size exceeded)

This also appears to not happen if we have multiple columns sorting, it happens only when sorting is fully removed (all columns are back to unsorted).

Needless to say, it used to work all fine prior to upgrading to v7.3.1.

Hope this helps. I can try to provide some snippets if needed.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.

[jameslibertas]

Can this be reopened? This is definitely still an issue.

[kavitang]

Yes, this is still an issue, and I have been unable to create a reproduction of this so far. I have had to comment out the sortModel to get this to work. I'll try with the replica sandbox once more over the weekend and update if I'm successful. Please let me know if there is any other specific information I can provide to help debug this in the meanwhile.

[romgrk]

We need more information at the moment. If someone can get us a runnable code example that showcases the exact options you're using, that would help a lot as the options can affect the behavior of the grid substantially so it's hard to debug without that.

[gaisdav]

I was able to get rid of the error when I rewrote the sortModel logic as in this example and used the useCallback hook for the onSortModelChange method.

[jameslibertas]

I was able to get rid of the error when I rewrote the sortModel logic as in this example and used the useCallback hook for the onSortModelChange method.

Reviewing this pointed out to me that we had a bug in that we were sorting based on a field name that didn't exist (typo in the name). Sharing in case that is helpful in adding code protection for that.

[cherniavskii]

@gaisdav Can you share more details about your setup so we can reproduce the issue and potentially fix it on the Data Grid side?

[cherniavskii]

@jameslibertas

Reviewing this pointed out to me that we had a bug in that we were sorting based on a field name that didn't exist (typo in the name). Sharing in case that is helpful in adding code protection for that.

I'm unable to reproduce the issue by sorting on the non-existing field: https://stackblitz.com/edit/react-jcxukq?file=Demo.tsx Was there anything else you changed to fix the error?

[gaisdav]

@cherniavskii yes, I'll try to do it on Monday. In our project we have a large table with a lot of properties. It won't be that easy.

[Thinkscape]

Have a try with my repro for #13122 - https://stackblitz.com/edit/github-gbfkio?file=src%2Fdemo.tsx

Is this similar to what you're encountering?

[gaisdav]

@cherniavskii Hi, I tried yesterday to reproduce the error in an empty project in codesandbox, but I couldn't. The old code was something like this, a bit similar to what @Thinkscape showed above.

const { ..., orderBy, orderDest, changeSorting } = props;

const handleSortModelChange = (sortModel: GridSortModel) => {
        // adapter which adapted the sortModel format to {orderBy, orderDest} or default values, if sortModel is empty
       changeSorting(adaptedSortModel)

}

<DataGridPro
    ...
    sortModel={[{ field: orderBy, sort: orderDest }]}
    onSortModelChange={handleSortModelChange}
    ...
/>

I changed it to

  const { ..., orderBy, orderDest, changeSorting } = props;

  const [sortModel, setSortModel] = React.useState<GridSortModel>([
        {
            field: orderBy,
            sort: orderDest,
        },
  ])

  useEffect(() => {
        if (sortModel.length) {
            props.changeSorting({
                orderBy: sortModel[0].field,
                orderDest: sortModel[0].sort,
            })
        }
    }, [sortModel])

    const handleSortModelChange = useCallback((_sortModel: GridSortModel) => {
        setSortModel(_sortModel)
    }, [])

<DataGridPro
    ...
    sortModel={sortModel}
    onSortModelChange={handleSortModelChange}
    ...
/>

these changes helped me.

By the way, I got an error when I changed the page and returned back to the page with the table.

I hope that I could help at least a little to understand the problem, although I myself did not fully understand what the problem was 😅

[oussamaAbdelwahed]

Hello , the issue seems to appear when the value of the 'field property doesn't match any of the columns 'field' property values (basically when using a field property value in sortModel that doesn't exist inside the array of columns)

[Thinkscape]

If that's the case, maybe we should have a quick validation routine at the init to check if referenced columns exist, before any other functionality is triggered?

[romgrk]

I can reproduce the issue with the repro above from @Thinkscape, I'll work on this one next week.