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

alexfauquette · 2025-10-28T15:28:32Z

Extraction from #20052

Just replaced the custom store by it's common version, and adapted the codebase to it.

Selectors remain untouched. Only the useLazySelectorEffect got replaced by useStoreEffect

mui-bot · 2025-10-28T15:30:26Z

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

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+100B^(+0.03%)	▼-65B^(-0.06%)
@mui/x-charts-pro	▼-51B^(-0.01%)	▼-85B^(-0.06%)
@mui/x-charts-premium	▼-72B^(-0.02%)	▼-113B^(-0.09%)
@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	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against e5e7786

codspeed-hq · 2025-10-28T15:41:06Z

CodSpeed Performance Report

Merging #20121 will improve performances by 18.11%

_{Comparing alexfauquette:use-store (e5e7786) with master (a46d338)}

Summary

⚡ 1 improvement
✅ 12 untouched

Benchmarks breakdown

	Mode	Benchmark	`BASE`	`HEAD`	Change
⚡	Simulation	`FunnelChart with big data amount`	40.5 ms	34.3 ms	+18.11%

packages/x-charts-pro/src/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.ts

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

alexfauquette · 2025-10-29T08:50:04Z

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

  React.useEffect(() => {
-    store.update((prev) => {
-      const width = params.width ?? prev.dimensions.width;
-      const height = params.height ?? prev.dimensions.height;
-
-      return {
-        ...prev,
-        dimensions: {
-          margin: {
-            top: params.margin.top,
-            right: params.margin.right,
-            bottom: params.margin.bottom,
-            left: params.margin.left,
-          },
-          width,
-          height,
-          propsHeight: params.height,
-          propsWidth: params.width,
-        },
-      };
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;


I noticed this was causing an additional rendering for no reason

We got a hook you can use for this now useEffectAfterFirstRender

alexfauquette · 2025-10-29T08:51:00Z

...x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

+      if (!onHighlightedAxisChange) {
+        return;
+      }


This is an early return to replace the skip parametter that does not exist on useStoreEffect()

I don't understand the use of useStoreEffect, like, what is it for? 🤔

I suppose it's for causing side-effects from store updates. This seems like a good use case: if the axis interaction changed, call the onChange callback

Ah ok, so listening to a update in the store.

Exactly. When a selector value get updated, the effect gets triggered

JCQuintas · 2025-10-29T10:08:51Z

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts

-          zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig),
-        },
-      };
+    store.set('zoom', {


Would it make sense to have a "partial set" where we only provide the changed props and the behaviour provides the unchanged ones?

@romgrk

// current set<T>(key: keyof State, value: T) { if (!Object.is(this.state[key], value)) { this.setState({ ...this.state, [key]: value }); } } // partial partial<T>(key: keyof State, value: Partial<T>) { this.setState({ ...this.state, [key]: { ...this.state[key], ...value } }); }

Would it make sense instead to implement support for nested keys? This would become store.set('zoom.zoomInteractionConfig', etc).

Wouldn't that break the selectors? If the root object doesn't change how will siblings know that the parent updated? 🤔

The implementation would mutate every parent object, just like it happens in your partial() example.

Ah, yeah we could do that 😅

Then I believe that API is better indeed

We might still need to update more than one prop though, so partial could still be useful 🙃

JCQuintas · 2025-10-29T10:23:21Z

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

  React.useEffect(() => {
-    store.update((prev) => {
-      const width = params.width ?? prev.dimensions.width;
-      const height = params.height ?? prev.dimensions.height;
-
-      return {
-        ...prev,
-        dimensions: {
-          margin: {
-            top: params.margin.top,
-            right: params.margin.right,
-            bottom: params.margin.bottom,
-            left: params.margin.left,
-          },
-          width,
-          height,
-          propsHeight: params.height,
-          propsWidth: params.width,
-        },
-      };
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;


We got a hook you can use for this now useEffectAfterFirstRender

JCQuintas · 2025-10-29T10:28:50Z

...x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

+      if (!onHighlightedAxisChange) {
+        return;
+      }


I don't understand the use of useStoreEffect, like, what is it for? 🤔

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

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

721b1bd

alexfauquette requested a review from bernardobelchior as a code owner October 28, 2025 15:28

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 28, 2025

alexfauquette requested a review from JCQuintas as a code owner October 28, 2025 15:28

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

flaviendelangle approved these changes Oct 28, 2025

View reviewed changes

packages/x-charts-pro/src/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.ts Outdated Show resolved Hide resolved

packages/x-charts/src/internals/store/useCharts.ts Show resolved Hide resolved

simplify cartesian update

b32b4a9

alexfauquette commented Oct 29, 2025

View reviewed changes

Merge branch 'master' into use-store

bb6dbcf

JCQuintas reviewed Oct 29, 2025

View reviewed changes

feedback

2bee968

bernardobelchior approved these changes Oct 29, 2025

View reviewed changes

JCQuintas approved these changes Oct 29, 2025

View reviewed changes

alexfauquette added 3 commits October 29, 2025 14:13

Merge remote-tracking branch 'upstream/master' into use-store

e75a7af

prettier

9a5ec31

fix-ts

e5e7786

alexfauquette merged commit 02ae439 into mui:master Oct 30, 2025
22 checks passed

Uh oh!

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

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

Uh oh!

Conversation

alexfauquette commented Oct 28, 2025

Uh oh!

mui-bot commented Oct 28, 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 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20121 will improve performances by 18.11%

Summary

Benchmarks breakdown

Uh oh!

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

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

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

mui-bot commented Oct 28, 2025 •

edited

Loading

codspeed-hq bot commented Oct 28, 2025 •

edited

Loading