[DataGrid] perf: fix stringify() for theme objects

packages/x-data-grid/src/material/variables.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { alpha, darken, lighten, type Theme } from '@mui/material/styles';
 import { useTheme } from '@mui/material/styles';
-import { hash, stringify } from '@mui/x-internals/hash';
+import { hash } from '@mui/x-internals/hash';
 import { vars, type GridCSSVariablesInterface } from '../constants/cssVariables';
 
 export function useMaterialCSSVariables() {
   const theme = useTheme();
   return React.useMemo(() => {
-    const id = hash(stringify(theme));
+    const id = hash(stringifyTheme(theme));
     const variables = transformTheme(theme);
     return { id, variables };
   }, [theme]);
@@ -125,3 +125,33 @@ function formatFont(font: React.CSSProperties | undefined) {
   }
   return `${font.fontWeight} ${font.fontSize} / ${font.lineHeight} ${font.fontFamily}`;
 }
+
+/**
+ * A version of JSON.stringify for theme objects.
+ * Fixes: https://github.com/mui/mui-x/issues/17521
+ * Source: https://www.30secondsofcode.org/js/s/stringify-circular-json/
+ */
+function stringifyTheme(input: object | string | number | null) {
+  const seen = new WeakSet();
+  return JSON.stringify(input, (_, v) => {
+    // https://github.com/mui/mui-x/issues/17855
+    if (
+      (typeof window !== 'undefined' && v === window) ||
+      (typeof document !== 'undefined' && v === document)
+    ) {
+      return v.toString();
+    }
+    if (v !== null && typeof v === 'object') {
+      // Do not attempt to serialize React elements due to performance concerns.
+      // Fixes https://github.com/mui/mui-x/issues/19414
+      if (React.isValidElement(v)) {
+        return null;
+      }
+      if (seen.has(v)) {
+        return null;
+      }
+      seen.add(v);
+    }
+    return v;
+  });
+}

packages/x-internals/src/hash/index.ts

@@ -1,2 +1 @@
 export * from './hash';
-export * from './stringify';