[useMediaQuery] Workaround Safari wrong implementation of matchMedia #17315
Conversation
…is may have happened in cases such as if a component unmounts when a window resizes. Pattern used is from: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies
Details of bundle changes.Comparing: 1eff1cf...a52f004
|
|
Thank you for opening this pull request. Do you have a reproduction? I thought the handler won't be called once I called |
This issue seems to be happening in Safari and not Chrome, at least on macOS. It seems that the listener is being triggered after the last render, but before the cleanup. Here is a sample Michael put together. In Safari, if you resize the window, you'll see a console error: |
|
I could reproduce with the link. We might want to report this issue to the Safari team and add a comment about it, so we could remove the defensive check, at some point, in the future. |
oliviertassinari
changed the title
|
I have frozen the reproduction version of Material-UI to v4.4.0 so we can test the reproduction somewhere in the future without the fix and a more recent version of Safari: https://codepen.io/oliviertassinari/pen/mdbqNLQ. |
|
I tried to run this on Safari 14.0 (16610.1.21.1.2), and I could not see any errors in the console. Except some errors I think might be from CodePen itself, so I tried in CodeSandBox, and works there too (https://codesandbox.io/s/runtime-wildflower-6bzns) |
For useMediaQuery(), don't call setState() once unmounting begins. This may have happened in cases such as if a component unmounts when a window resizes.