[charts] Move series default to selector

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.ts

@@ -1,15 +1,20 @@
 import { createSelectorMemoized, createSelector } from '@mui/x-internals/store';
 import { ChartRootSelector } from '../../utils/selectors';
 import { UseChartSeriesSignature } from './useChartSeries.types';
-import { applySeriesLayout, applySeriesProcessors } from './processSeries';
+import { applySeriesLayout, applySeriesProcessors, defaultizeSeries } from './processSeries';
 import { selectorChartDrawingArea } from '../useChartDimensions/useChartDimensions.selectors';
 
 export const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature> = (state) =>
   state.series;
 
-export const selectorChartDefaultizedSeries = createSelector(
+export const selectorChartDefaultizedSeries = createSelectorMemoized(
   selectorChartSeriesState,
-  (seriesState) => seriesState.defaultizedSeries,
+  ({ colors, series, theme, seriesConfig }) =>
+    defaultizeSeries({
+      series,
+      colors: typeof colors === 'function' ? colors(theme) : colors,
+      seriesConfig,
+    }),
 );
 
 export const selectorChartSeriesConfig = createSelector(

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.ts

@@ -1,9 +1,8 @@
 'use client';
-import * as React from 'react';
+import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { ChartPlugin } from '../../models';
 import { UseChartSeriesSignature } from './useChartSeries.types';
 import { rainbowSurgePalette } from '../../../../colorPalettes';
-import { defaultizeSeries } from './processSeries';
 
 export const useChartSeries: ChartPlugin<UseChartSeriesSignature> = ({
   params,
@@ -12,23 +11,12 @@ export const useChartSeries: ChartPlugin<UseChartSeriesSignature> = ({
 }) => {
   const { series, dataset, theme, colors } = params;
 
-  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartSeries`
-  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
-  const isFirstRender = React.useRef(true);
-
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
+  useEffectAfterFirstRender(() => {
     store.set('series', {
       ...store.state.series,
-      defaultizedSeries: defaultizeSeries({
-        series,
-        colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-      }),
+      series,
+      colors,
+      theme,
       dataset,
     });
   }, [colors, dataset, series, theme, seriesConfig, store]);
@@ -56,11 +44,9 @@ useChartSeries.getInitialState = ({ series = [], colors, theme, dataset }, _, se
   return {
     series: {
       seriesConfig,
-      defaultizedSeries: defaultizeSeries({
-        series,
-        colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-      }),
+      series,
+      colors,
+      theme,
       dataset,
     },
   };

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.ts

@@ -56,7 +56,9 @@ export type DefaultizedSeriesGroups<TSeriesTypes extends ChartSeriesType = Chart
 
 export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType> {
   series: {
-    defaultizedSeries: DefaultizedSeriesGroups<T>;
+    series: Readonly<AllSeriesType<T>[]>;
+    colors: ChartsColorPalette;
+    theme: 'light' | 'dark';
     seriesConfig: ChartSeriesConfig<T>;
     dataset?: Readonly<DatasetType>;
   };