[charts] Use selectors from `@mui/x-internals` #20052

alexfauquette · 2025-10-22T09:41:06Z

First step for #20046 I do as few renaming as possible

Still need to work on the memoization aspect: Which selector should be memoized or not

mui-bot · 2025-10-22T09:42:44Z

Deploy preview: https://deploy-preview-20052--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+343B^(+0.09%)	🔺+38B^(+0.03%)
@mui/x-data-grid-pro	🔺+343B^(+0.07%)	🔺+57B^(+0.04%)
@mui/x-data-grid-premium	🔺+343B^(+0.05%)	🔺+44B^(+0.02%)
@mui/x-charts	🔺+1.56KB^(+0.46%)	🔺+434B^(+0.43%)
@mui/x-charts-pro	🔺+1.45KB^(+0.33%)	🔺+430B^(+0.32%)
@mui/x-charts-premium	🔺+1.48KB^(+0.34%)	🔺+441B^(+0.34%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	🔺+343B^(+0.53%)	🔺+71B^(+0.36%)
@mui/x-tree-view-pro	🔺+15B^(+0.02%)	🔺+10B^(+0.04%)

Details of bundle changes

Generated by 🚫 dangerJS against 815b6cf

codspeed-hq · 2025-10-22T10:06:24Z

CodSpeed Performance Report

Merging #20052 will improve performances by 10%

_{Comparing alexfauquette:no-renamining (815b6cf) with master (49816fd)¹}

Summary

⚡ 4 improvements
✅ 9 untouched

Benchmarks breakdown

	Mode	Benchmark	`BASE`	`HEAD`	Change
⚡	Simulation	`BarChart with big data amount`	2 s	1.8 s	+9.95%
⚡	Simulation	`SankeyChart with big data amount`	125.8 ms	115.2 ms	+9.17%
⚡	Simulation	`ScatterChartPro with big data amount and zoomed in (single renderer)`	71.3 ms	64.9 ms	+9.83%
⚡	Simulation	`ScatterChartPro with big data amount and zoomed in (batch renderer)`	72 ms	65.5 ms	+10%

No successful run was found on master (d2a635b) during the generation of this report, so 49816fd was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

github-actions · 2025-10-22T12:33:08Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2025-10-27T15:06:47Z

packages/x-charts/src/ChartsWrapper/ChartsWrapper.tsx

+  const propsWidth = useSelector(store, selectorChartPropsWidth);
+  const propsHeight = useSelector(store, selectorChartPropsHeight);


Use selectors that return number to avoid having to memoize those

alexfauquette · 2025-10-27T15:16:56Z

packages/x-charts/src/internals/createSeriesSelectorOfType.ts

+      store,
+      selectorSeriesWithIds,
+      ids,
+      // fastArrayCompare


Would be nice but not urgent to bring that logic.

The issue it solves is the following one:

If any processesd series get updated, the follwoing hook will trigger a re-render, because it returns a new array of series. Event if the objects are exactly the same

const specialSeries = useBarSeries(['id1', 'id2'])

Could we spread the IDs? useBarSeries('id1', 'id2')?

Not really because selectors are limited to 3 args. so 3 ids in that case.

But the more I think about it, the more I consider we could remove the array option

But the more I think about it, the more I consider we could remove the array option

It would be a breaking change, wouldn't it?

I guess it can make sense if you have programmatically generated series, though. Otherwise you need N hooks for N series.

I guess it can make sense if you have programmatically generated series, though. Otherwise you need N hooks for N series.

you can always provide no array and get all series, albeit the result shape is different

It would be a breaking change, wouldn't it?

yeah

we could do something like useBarChart([1,2,3]) => arg0.map(v => series[v]) though

alexfauquette · 2025-10-27T15:19:02Z

...rts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.ts

-        : acc,
-    0,
-  ),
+export const selectorChartAxisSizes = createSelectorMemoized(


I grouped all the axis sizes in a single memoized object to reduce the number of selectors for drawing area

alexfauquette · 2025-10-27T15:21:42Z

...rnals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.ts

  [
-    selectorChartRawXAxis,
    selectorChartSeriesProcessed,
    selectorChartSeriesConfig,
    selectorChartZoomOptionsLookup,
    selectorChartDrawingArea,
    selectorChartPreviewXScales,
-    selectorChartXDomains,
-    (_, axisId: AxisId) => axisId,
+    selectorChartXAxisWithDomains,
  ],

  (


This selector was exceeding the number of allowed selectors.

Since selectorChartXDomains has selectorChartRawXAxis as an input, I modified selectorChartXDomains to return both the domains and the raw axes

alexfauquette · 2025-10-27T15:27:34Z

...rnals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.ts

+  // {
+  //   memoizeOptions: {
+  //     // Keep the same reference if array content is the same.
+  //     // If possible, avoid this pattern by creating selectors that
+  //     // uses string/number as arguments.
+  //     resultEqualityCheck: isDeepEqual,
+  //   },
+  // },


We should bring that back

The selectors get the pointer x-coordinate, and the x-axes. From that it derives axes data indexes associated to the pointer.

This isDeepEqual was here to update the value only when the pointer moves from one value to another.

@romgrk Woudl you be ok if we add an option in createSelectorMemoized to modify the memoizeOptions?

If it's not possible to inline the arguments to avoid the array, then yes we could, but that sounds like a hack so I would avoid it if possible.

I've inlined the one I could, but this one does not look feasible

alexfauquette · 2025-10-27T15:28:15Z

...s/x-charts/src/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.ts

-            },
-          },
-    );
+    store.set('voronoi', { isVoronoiEnabled: !disableVoronoi });


The voronoi state only have isVoronoiEnabled property

alexfauquette · 2025-10-27T15:28:50Z

...src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.ts

+  // {
+  //   memoizeOptions: {
+  //     // Keep the same reference if array content is the same.
+  //     // If possible, avoid this pattern by creating selectors that
+  //     // uses string/number as arguments.
+  //     resultEqualityCheck: isDeepEqual,
+  //   },
+  // },
 );


Same issue as in the cartesian axes

packages/x-internals/src/store/createSelector.ts

github-actions · 2025-10-29T13:14:16Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-10-30T08:34:54Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior · 2025-10-30T11:38:25Z

...rnals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.ts

  },
 );

+const noop: AxisItemIdentifier[] = [];


Might be more descriptive:

Suggested change

const noop: AxisItemIdentifier[] = [];

const EMPTY_ARRAY: AxisItemIdentifier[] = [];

bernardobelchior · 2025-10-30T11:42:58Z

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

+/**
+ * Method wrapping reselect's createChartSelector to provide caching for chart instances.
+ */
+export const createSelector = <


I suppose this is meant as a stepping stone to remove later, right? What's preventing us from using the createSelector from the x-internals store directly?

To do so you would have to modify all the selectors because of a small difference. Si it's mostly to avoid useless diff in the initial PR

// our createSelector([select1, select2], combiner) // internal createSelector(select1, select2, combiner)

Makes sense.

Do we want to migrate to the new API or keep our current one? Just so we align on new selectors

I would be in favor of moving to the new selectors API.

That's why I directly imported the memoized one.
For the migration we would "just" have to replace all the imports and remove the [] around selectors

bernardobelchior · 2025-10-30T11:44:16Z

packages/x-charts/src/internals/createSeriesSelectorOfType.ts

+      store,
+      selectorSeriesWithIds,
+      ids,
+      // fastArrayCompare


Could we spread the IDs? useBarSeries('id1', 'id2')?

bernardobelchior

Thanks for this 🙏

JCQuintas · 2025-10-30T17:00:34Z

...rts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.ts

-        : acc,
-    0,
-  ),
+export const selectorChartLeftAxisSize = createSelectorMemoized(


Why are these memoized if they return a number? 🤔

Probably nothing 🫣

JCQuintas

no issues, only questions 😆

Co-authored-by: Jose Quintas <juniorquintas@gmail.com>

alexfauquette added 3 commits October 21, 2025 13:24

Use the internal store

2bd47da

Fix store.update()

1b12e9b

move selectors

1b7fba0

alexfauquette added the scope: charts Changes related to the charts. label Oct 22, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 22, 2025

alexfauquette added 5 commits October 22, 2025 15:06

Merge remote-tracking branch 'upstream/master' into no-renamining

1baa85c

fix series selectors

96c3da0

fix tooltip

0a235cb

prettier

593575f

Try using variable as recomanded by Romain

65b8785

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 22, 2025

alexfauquette added 15 commits October 24, 2025 13:30

Merge remote-tracking branch 'upstream/master' into no-renamining

df2ddc0

fix visual regressions

17ebe58

fix-ts

067bdc0

prettier

4ba0463

memoize axis computation

31813bc

Avoid SVG rerendering

c26f696

Memoize bar element rendering

2dcd2db

fix-sizing

7285902

memoize flatbrush

e5ea1eb

mmeoize funnel axis

fabf213

memoize highlighted item

074b1f7

fix

617f9c5

memoize zoom filters

1ff3dc1

fix empty array ref

d749818

script and renaming

09dff85

alexfauquette commented Oct 27, 2025

View reviewed changes

forgotten lines

67d92e5

alexfauquette added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Oct 27, 2025

alexfauquette mentioned this pull request Oct 28, 2025

[charts] Use store from @mui/x-internals #20121

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 29, 2025

Merge remote-tracking branch 'upstream/master' into no-renamining

5f46ae4

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 29, 2025

Merge remote-tracking branch 'upstream/master' into no-renamining

d334f72

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2025

fixes

22afbb3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2025

alexfauquette marked this pull request as ready for review October 30, 2025 10:29

alexfauquette requested review from JCQuintas and bernardobelchior as code owners October 30, 2025 10:29

alexfauquette changed the title ~~Use the internal store~~ [charts] Use selectors from @mui/x-internals Oct 30, 2025

bernardobelchior reviewed Oct 30, 2025

View reviewed changes

alexfauquette added 3 commits October 30, 2025 15:09

add memoization

3b92ce2

rename

c8c61e5

Merge remote-tracking branch 'upstream/master' into no-renamining

1270430

bernardobelchior approved these changes Oct 30, 2025

View reviewed changes

JCQuintas reviewed Oct 30, 2025

View reviewed changes

JCQuintas approved these changes Oct 30, 2025

View reviewed changes

JCQuintas added 2 commits October 31, 2025 15:41

use selector

e4e17d0

Merge branch 'master' into no-renamining

815b6cf

JCQuintas enabled auto-merge (squash) October 31, 2025 14:42

JCQuintas merged commit f775e82 into mui:master Oct 31, 2025
22 checks passed

mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025

[charts] Use selectors from @mui/x-internals (mui#20052)

edd1e55

Co-authored-by: Jose Quintas <juniorquintas@gmail.com>

		const propsWidth = useSelector(store, selectorChartPropsWidth);
		const propsHeight = useSelector(store, selectorChartPropsHeight);

	const noop: AxisItemIdentifier[] = [];
	const EMPTY_ARRAY: AxisItemIdentifier[] = [];

Uh oh!

[charts] Use selectors from @mui/x-internals #20052

[charts] Use selectors from @mui/x-internals #20052

Uh oh!

Conversation

alexfauquette commented Oct 22, 2025 • edited by mnajdova Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20052 will improve performances by 10%

Summary

Benchmarks breakdown

Footnotes

Uh oh!

github-actions bot commented Oct 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Oct 29, 2025

Uh oh!

github-actions bot commented Oct 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

[charts] Use selectors from `@mui/x-internals` #20052

[charts] Use selectors from `@mui/x-internals` #20052

alexfauquette commented Oct 22, 2025 •

edited by mnajdova

Loading

mui-bot commented Oct 22, 2025 •

edited

Loading

codspeed-hq bot commented Oct 22, 2025 •

edited

Loading