[DataGrid] Maximum Call Stack Size exceeded for `createSelectorMemoized` about mui-x HOT 10 CLOSED

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}
    />
  )
}

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);
       };