[charts] Plugin selector memoization issue

packages/x-charts/src/internals/plugins/utils/selectors.ts

@@ -1,11 +1,30 @@
 import { lruMemoize, createSelectorCreator, CreateSelectorFunction } from 'reselect';
+import { fastShallowCompare } from '@mui/x-internals/fastShallowCompare';
 import { ChartAnyPluginSignature, ChartState, ChartStateCacheKey } from '../models';
 
+const complainIfNoMemoize =
+  (name: string) =>
+  (a: any, b: any): boolean => {
+    const is = Object.is(a, b);
+    const shallow = fastShallowCompare(a, b);
+    if (is !== shallow) {
+      console.warn(
+        `Selector ${name} returned inconsistent results. Is: ${is} Shallow: ${shallow}`,
+        a,
+        b,
+      );
+    }
+    return is;
+  };
+
 const reselectCreateSelector = createSelectorCreator({
   memoize: lruMemoize,
   memoizeOptions: {
     maxSize: 1,
-    equalityCheck: Object.is,
+    // equalityCheck: complainIfNoMemoize('prop check'),
+    equalityCheck: fastShallowCompare,
+    // resultEqualityCheck: complainIfNoMemoize('result check'),
+    resultEqualityCheck: fastShallowCompare,
   },
 });
 

packages/x-charts/src/internals/store/useSelector.ts

@@ -2,14 +2,25 @@ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-s
 import { ChartAnyPluginSignature, ChartState } from '../plugins/models';
 import { ChartsSelector } from '../plugins/utils/selectors';
 import { ChartStore } from '../plugins/utils/ChartStore';
+import { fastShallowCompare } from '@mui/x-internals/fastShallowCompare';
 
 const defaultCompare = Object.is;
 
+const complainIfNoMemoize = (a: any, b: any): boolean => {
+  const is = Object.is(a, b);
+  const shallow = fastShallowCompare(a, b);
+  if (is !== shallow) {
+    console.warn(`useSelector returned inconsistent results. Is: ${is} Shallow: ${shallow}`, a, b);
+  }
+  return is;
+};
+
 export const useSelector = <TSignatures extends readonly ChartAnyPluginSignature[], TArgs, TValue>(
   store: ChartStore<TSignatures>,
   selector: ChartsSelector<ChartState<TSignatures>, TArgs, TValue>,
   args: TArgs = undefined as TArgs,
-  equals: (a: TValue, b: TValue) => boolean = defaultCompare,
+  // equals: (a: TValue, b: TValue) => boolean = complainIfNoMemoize,
+  equals: (a: TValue, b: TValue) => boolean = fastShallowCompare,
 ): TValue => {
   const selectorWithArgs = (state: ChartState<TSignatures>) => selector(state, args);
 

packages/x-internals/src/fastShallowCompare/fastShallowCompare.ts

@@ -0,0 +1,19 @@
+import { fastArrayCompare } from '../fastArrayCompare';
+import { fastObjectShallowCompare } from '../fastObjectShallowCompare';
+
+/**
+ * Fast shallow compare.
+ *
+ * Builds on top of `fastArrayCompare` and `fastObjectShallowCompare` and uses them for their respective types.
+ *
+ * @returns true if `a` and `b` are equal.
+ */
+export function fastShallowCompare(a: any, b: any) {
+  if (Array.isArray(a)) {
+    return fastArrayCompare(a, b);
+  }
+  if (b instanceof Object) {
+    return fastObjectShallowCompare(a, b);
+  }
+  return Object.is(a, b);
+}

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

@@ -0,0 +1 @@
+export * from './fastShallowCompare';