Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[utils] Do not deep merge React component #45058

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[utils] Do not deep merge React component #45058

wants to merge 1 commit into from
+14 −2

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jan 20, 2025 •
edited
Loading

closes #45052

Root cause

deepmerge currently iterate a React component that's wrapped with forwardRef or memo. The issue arise when using Link from nextjs (contains recursive render) because deepmerge will iterate infinitely causing maximum callstack error from the usage below:

import { createTheme } from '@mui/material/styles';
import Link from 'next/link';

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        component: Link,
      },
    },
  },
});

It does not make sense anyway to iterate fields inside a React component, so a side benefit of this PR is the performance improvement.

@siriwatknp siriwatknp added the package: utils Specific to the @mui/utils package label Jan 20, 2025
@mui-bot
Copy link

mui-bot commented Jan 20, 2025 •
edited
Loading

Netlify deploy preview

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

Grow: parsed: +2.26% , gzip: +2.16%
Fade: parsed: +2.27% , gzip: +2.08%
Zoom: parsed: +2.27% , gzip: +2.08%
@material-ui/core/styles/createTheme: parsed: +3.18% , gzip: +3.03%
Slide: parsed: +2.17% , gzip: +1.99%
Stack: parsed: +1.80% , gzip: +1.42%
InputLabel: parsed: +1.72% , gzip: +1.43%
@mui/joy/SvgIcon: parsed: +1.94% , gzip: +1.76%
@mui/joy/Checkbox: parsed: +1.67% , gzip: +1.41%
@mui/joy/Radio: parsed: +1.71% , gzip: +1.45%
@mui/joy/Container: parsed: +1.99% , gzip: +1.83%
@mui/joy/Textarea: parsed: +1.73% , gzip: +1.45%
@mui/joy/Divider: parsed: +1.92% , gzip: +1.73%
@mui/joy/ListItemButton: parsed: +1.87% , gzip: +1.51%
@mui/joy/AccordionDetails: parsed: +1.91% , gzip: +1.73%
@mui/joy/Step: parsed: +1.88% , gzip: +1.71%
@mui/joy/CardContent: parsed: +1.95% , gzip: +1.76%
@mui/joy/StepButton: parsed: +1.93% , gzip: +1.74%
@mui/joy/ScopedCssBaseline: parsed: +1.95% , gzip: +1.74%
@mui/joy/Accordion: parsed: +1.78% , gzip: +1.61%
and 191 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f3a4bf2

siriwatknp
siriwatknp commented Jan 20, 2025
View reviewed changes
packages/mui-utils/src/deepmerge/deepmerge.test.ts
{ defaultProps: { component: Link } },
);

expect(result.defaultProps.component).to.equal(Link);
Copy link
Member Author

@siriwatknp siriwatknp Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without the change in this PR, this test throws because the component is a new object. This test ensure that the Link is not iterated by deepmerge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brijeshb42 brijeshb42 Awaiting requested review from brijeshb42

@aarongarciah aarongarciah Awaiting requested review from aarongarciah

@DiegoAndai DiegoAndai Awaiting requested review from DiegoAndai

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
package: utils Specific to the @mui/utils package
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

createTheme maximum call stack exceeded using next/link for LinkBehavior
2 participants
@siriwatknp @mui-bot