useTheme returns a new reference every time if any provided theme has cssVariables: true

[Wedvich]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/sad-oskar-jf9smp
2. Click the "Make it rerender" button
3. See that the memoized RerenderedComponent rerenders, and that the console prints a diff between the theme provided by the useTheme hook

If you set both cssVariables props to false, it doesn't rerender. If either theme has cssVariables: true it rerenders. It seems like the unstable properties are always the spacing and unstable_sx functions - all other props are deeply equal (though they might have new references as well)

Current behavior

useTheme will return a new reference - even if the theme hasn't changed - if any theme in a nested hierarchy has cssVariables: true. This causes memoized components/functions to be reevaluated even if nothing on the theme has been explicitly modified.

Expected behavior

The theme reference returned from useTheme should be stable, and only change if the theme itself has changed.

Context

I want to be able to pass the output from useTheme to memoized components/useEffect calls and not have them reevaluate unless something has actually changed.

Your environment

npx @mui/envinfo

System:                                                                                   
    OS: macOS 15.0.1                                                                        
  Binaries:                                                                                 
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: Not Found                           
  Browsers:                                                                                 
    Chrome: 131.0.6778.86                                                                   
    Firefox: 132.0.2         
    Safari: 18.0.1                                                                          
  npmPackages:                                
    @emotion/react:  11.13.5                                                                
    @emotion/styled:  11.13.5                 
    @mui/core-downloads-tracker:  6.1.8                                                     
    @mui/material:  6.1.8                                                                   
    @mui/private-theming:  6.1.8                                                            
    @mui/styled-engine:  6.1.8                                                              
    @mui/styles:  6.1.8                                                                     
    @mui/system:  6.1.8                                                                     
    @mui/types:  7.2.19                                                                     
    @mui/utils:  6.1.6                        
    @mui/x-date-pickers:  7.22.3                                                            
    @mui/x-internals:  7.21.0                 
    @types/react:  18.2.48                                                                  
    react:  18.3.1                            
    react-dom:  18.3.1                                                                      
    styled-components:  5.3.11                                                              
    typescript: ^5.6.3 => 5.6.3                                                             
                                        

Search keywords: cssVariables, ThemeProvider, useTheme

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Wedvich How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.