[internal] perf: sx by romgrk · Pull Request #44254 · mui/material-ui

romgrk · 2024-10-29T13:12:17Z

Improve sx performance by removing allocations.

Before: 23.4ms +-1.6
After:  15.2ms +-1.1

n=100

We get roughly 35% less rendering time for the example above which makes heavy use of the sx prop, so I guess user-code would see something in the 0-40% less rendering time depending on how much they use that prop.

We can still get a lot more improvement by eliminating more memory allocations (I think we can get that example to at least 50% less rendering time), but the remaining changes would require more substantial work. The format of the style({ [prop]: value, theme }) sx style handlers is expensive, we could instead use something like style(prop, value, theme), though IIUC the system props also use those so there's a bit of refactoring to do.

The logic to create an empty breakpoint object for each sx object/subobject is also expensive, I've tried to remove it by lazily initializing the breakpoints but handleBreakpoints is used too much in the codebase so that's another large refactor.

mui-bot · 2024-10-29T13:14:56Z

Netlify deploy preview

https://deploy-preview-44254--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+1.09KB^(+0.22%)	🔺+413B^(+0.29%)
@mui/lab	🔺+2.09KB^(+6.56%)	🔺+788B^(+9.78%)
@mui/system	🔺+1.23KB^(+1.81%)	🔺+416B^(+1.73%)
@mui/utils	🔺+836B^(+5.44%)	🔺+264B^(+4.40%)

Details of bundle changes

Generated by 🚫 dangerJS against b6b60f0

packages/mui-utils/src/fastDeepAssign/fastDeepAssign.ts

siriwatknp · 2025-05-01T14:32:48Z

I will spend time on this next week.

# Conflicts: # docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.js # docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.tsx # packages/mui-system/src/createStyled/createStyled.js # packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts # packages/mui-system/src/merge/merge.ts # packages/mui-system/src/style/style.d.ts # packages/mui-system/src/styleFunctionSx/styleFunctionSx.js

Copilot

Pull request overview

This PR targets sx runtime performance in @mui/system by reducing allocations and switching to more mutation-friendly helpers during style computation, especially around deep merges and breakpoint traversal.

Changes:

Introduces @mui/utils/fastDeepAssign and @mui/utils/isObjectEmpty and adopts them across system utilities.
Refactors breakpoint handling (iterateBreakpoints, DEFAULT_BREAKPOINTS, internal_mediaKeys) and updates sx processing to use these faster primitives.
Migrates style implementation to TypeScript and updates docs/tests to match the new theme/breakpoint setup.

Reviewed changes

Copilot reviewed 24 out of 27 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/mui-utils/src/isObjectEmpty/isObjectEmpty.ts	Adds shared object-emptiness helper used by system utilities
packages/mui-utils/src/fastDeepAssign/fastDeepAssign.ts	Adds a performance-focused deep assign/merge helper
packages/mui-utils/src/index.ts	Exposes new utils from the utils package entrypoint
packages/mui-system/src/styleFunctionSx/styleFunctionSx.js	Refactors `sx` traversal to reduce allocations and use new breakpoint helpers
packages/mui-system/src/breakpoints/breakpoints.js	Adds `DEFAULT_BREAKPOINTS`, `iterateBreakpoints`, and uses `internal_mediaKeys` for faster empty breakpoint objects
packages/mui-system/src/createBreakpoints/createBreakpoints.*	Precomputes `internal_mediaKeys` for reuse
packages/mui-system/src/spacing/spacing.js	Reduces allocations by precomputing CSS property mappings and iterating props via `for..in`
packages/mui-system/src/compose/compose.js	Switches compose merging to `fastDeepAssign`
packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts	Optimizes sorting by avoiding intermediate arrays/copies and early-exiting when no CQ keys exist
packages/mui-system/src/style/style.ts (+ removals)	Migrates `style` implementation to TS and adds `getStyleValue2`/optimized `getPath`
packages/mui-system/src/createTheme/createTheme.js (+ vars theme files)	Adds `internal_cache` to theme objects
packages/mui-material/src/styles/stringifyTheme.ts	Filters `internal_*` keys from theme stringification
docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.*	Updates example preview/source (currently inconsistent)

Comments suppressed due to low confidence (1)

docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.tsx:15

This example now imports createTheme but doesn't use it, and the preview wraps the output in <ThemeProvider theme={theme}> even though this component doesn't provide a ThemeProvider or define theme. Either wrap Div with a ThemeProvider here (and create a theme via createTheme()), or revert the preview change to avoid broken docs/examples.

import styled from 'styled-components';
import { palette, PaletteProps, spacing, SpacingProps } from '@mui/system';
import { createTheme } from '@mui/material/styles';

const Div = styled.div<PaletteProps & SpacingProps>`
  ${palette}
  ${spacing}
`;

export default function CombiningStyleFunctionsDemo() {
  return (
    <Div color="white" bgcolor="palevioletred" p={1}>
      Styled components
    </Div>
  );

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

packages/mui-utils/src/isObjectEmpty/isObjectEmpty.ts

packages/mui-system/src/breakpoints/breakpoints.js

Copilot · 2026-03-12T13:35:01Z

packages/mui-system/src/breakpoints/breakpoints.js

+export function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
+  const { internal_mediaKeys: mediaKeys } = breakpoints;
+  const result = {};
+  for (let i = 0; i < mediaKeys.length; i += 1) {
+    result[mediaKeys[i]] = {};
+  }
+  return result;


createEmptyBreakpointObject now requires breakpoints.internal_mediaKeys to exist. If a consumer provides a custom theme.breakpoints object (or a test stub) without this internal field, this will throw. Consider falling back to computing media keys from breakpoints.keys + breakpoints.up when internal_mediaKeys is missing, so this remains backward-compatible.

docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.tsx.preview

silviuaavram · 2026-03-12T13:44:15Z

packages/mui-system/src/breakpoints/breakpoints.js

+export function hasBreakpoint(breakpoints, value) {
+  if (Array.isArray(value)) {
+    return true;
+  }
+  if (typeof value === 'object' && value !== null) {
+    for (let i = 0; i < breakpoints.keys.length; i += 1) {
+      if (breakpoints.keys[i] in value) {
+        return true;
+      }
+    }
+  }
+  return false;
+}


This is, more or less, Array.some

export function hasBreakpoint(breakpoints, value) { if (Array.isArray(value)) { return true; } if (typeof value === 'object' && value !== null) { return breakpoints.keys.some((key) => key in value); } return false; }

Considering this is a perf PR, I assume the changes are intentionally not using array methods, e.g. check https://romgrk.com/posts/optimizing-javascript/#3-avoid-arrayobject-methods. Same for the other comments below 👇

Indeed intentional. I avoid array methods on very low-level utils like these ones which are used basically everywhere. I only do micro-optizimations like this for very hot code, not so much for high-level components.

silviuaavram · 2026-03-12T13:46:54Z

packages/mui-system/src/createBreakpoints/createBreakpoints.js

+  const mediaKeys = [];
+  for (let i = 0; i < keys.length; i += 1) {
+    mediaKeys.push(up(keys[i]));


maybe map?

const mediaKeys = keys.map(up);

silviuaavram · 2026-03-12T13:48:26Z

packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts

+
+function hasContainerQuery(css: Record<string, any>) {
+  for (const key in css) {
+    if (key.startsWith('@container')) {


some here

mj12albert · 2026-03-24T19:34:20Z

packages/mui-system/src/styleFunctionSx/styleFunctionSx.js

+        if (hasBreakpoint(breakpoints, value)) {
+          iterateBreakpoints(css, props.theme, value, (mediaKey, finalValue) => {
+            css[mediaKey][styleKey] = finalValue;
+          });
+        } else {
+          wrapper.sx = value;
+          css[styleKey] = styleFunctionSx(wrapper);
+        }


Codex review – it suggested letting the hasBreakpoint check allow container query shorthands (sx={{ opacity: { '@xs': 0.1, '@sm': 0.2 } }}) because it currently works on master but this PR changes that

Container-query shorthands stopped working for non-system CSS props. The decision point in styleFunctionSx.js now depends on hasBreakpoint(), but that helper only checks breakpoint keys and arrays, not @xs / @600 shorthands. I verified sx={{ opacity: { '@xs': 0.1, '@sm': 0.2 } }}: master produces @container rules, this PR returns the raw nested object unchanged. Recommendation: treat container-query shorthands as breakpoint-like in hasBreakpoint, or restore the old “run through handleBreakpoints first” behavior for unknown object-valued CSS props.

pushed a fix and added a test.

@xs

…nfig CSS props - Fix internal_mediaKeys type from { [key: string]: number } to string[] - Fix hasBreakpoint to detect container query shorthands (@xs, @sm, etc.) for non-system CSS properties like opacity - Add regression test for sx={{ opacity: { '@xs': 0.1, '@sm': 0.2 } }} Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

alexwork1611 · 2026-03-26T06:53:52Z

Huge. Thank you!

perf: initial work

cb1539b

romgrk added performance internal Behind-the-scenes enhancement. Formerly called “core”. labels Oct 29, 2024

romgrk added 12 commits October 29, 2024 10:05

perf: more work

be47607

lint

e387422

lint

2da8c80

lint

5cf7676

lint

f65132c

lint

490e808

lint

17eb786

lint

6d2f759

lint

4f7de94

perf: more work

89d3e11

lint

d88d4db

perf: remove allocations

c288aac

romgrk commented Oct 30, 2024

View reviewed changes

packages/mui-utils/src/fastDeepAssign/fastDeepAssign.ts Show resolved Hide resolved

romgrk added 13 commits October 30, 2024 01:49

lint

7d70f97

perf: container queries

a221c46

lint

b1cdfcb

Merge branch 'master' into perf-sx

d4141ca

lint

f7fe570

lint

ec67cbb

perf: compose()

5ef7075

refactor: alternateProp logic for fontFamilyCode

0123e02

lint

07e4410

lint

f202bc8

lint

d9f7017

lint

046d66b

perf: improve breakpoint mq cloning

d586a77

romgrk added 2 commits April 28, 2025 21:52

Merge branch 'master' into perf-sx

6aaf325

Merge branch 'perf-sx' of github.com:romgrk/material-ui into perf-sx

6580df8

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

refactor: fix merge conflict

3ed6417

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

oliviertassinari changed the title ~~[core] perf: sx~~ [internal] perf: sx Aug 16, 2025

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

mnajdova added 2 commits March 10, 2026 12:48

fix layers

354fa02

lint

71fc34e

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

Merge branch 'master' into perf-sx

f89cd27

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

more fixes

f5b6e62

silviuaavram requested a review from Copilot March 12, 2026 13:28

Copilot started reviewing on behalf of silviuaavram March 12, 2026 13:28 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

silviuaavram reviewed Mar 12, 2026

View reviewed changes

mnajdova added 5 commits March 24, 2026 10:02

add null check

c893cb0

Merge branch 'master' into perf-sx

12ef81e

ci

f5c2de2

ci

a4dfff1

Merge branch 'master' into perf-sx

8cc7e52

mnajdova approved these changes Mar 24, 2026

View reviewed changes

mj12albert reviewed Mar 24, 2026

View reviewed changes

siriwatknp and others added 2 commits March 25, 2026 12:02

Merge branch 'master' into perf-sx

b6b60f0

siriwatknp merged commit a884702 into mui:master Mar 25, 2026
19 checks passed

Uh oh!

Conversation

romgrk commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Uh oh!

siriwatknp commented May 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

silviuaavram Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

mnajdova Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

romgrk Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

silviuaavram Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

silviuaavram Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siriwatknp Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexwork1611 commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

romgrk commented Oct 29, 2024 •

edited

Loading

mui-bot commented Oct 29, 2024 •

edited

Loading

mj12albert Mar 24, 2026 •

edited

Loading

siriwatknp Mar 25, 2026 •

edited

Loading