Skip to content

Conversation

@aarongarciah
Copy link
Member

@aarongarciah aarongarciah commented Aug 12, 2024

While upgrading to React 19 (PR) a useMediaQuery test started to fail.

React 19 is calling React.useMemo and other hooks in a different way than React 18 and that is making our fakeMatchMedia test implementation to fail. This fake implementation keeps a list of matchMedia instances to later be able to assert things, but the list of instances has a different order in React 18 and React 19.

To solve it, I've added a Map of matchMedia instances so we only create one for a given query. This is closer to how the real window.matchMedia is used in useMediaQuery, because it's just a local variable (see source code).

The changes in this PR makes the test pass also in React 19 as you can see in #42824

@mui-bot
Copy link

mui-bot commented Aug 12, 2024

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against afa1ff1

@aarongarciah aarongarciah marked this pull request as ready for review August 12, 2024 09:15
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

👍 Map looks better.

@aarongarciah aarongarciah merged commit 722dcce into mui:next Aug 12, 2024
@aarongarciah aarongarciah deleted the fix-use-media-query-react-test-react-19 branch August 12, 2024 14:26
DiegoAndai pushed a commit to DiegoAndai/material-ui that referenced this pull request Nov 26, 2024
@oliviertassinari oliviertassinari added the scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI label Aug 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

hook: useMediaQuery integration: react About improving React support. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants