[useMediaQuery] Doesn't fire after state change

[pavsidhu]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/charming-microservice-imyon7?file=/src/App.tsx

Steps:

1. Increase and decrease the window width so you can see the media query updates correctly in the console
2. Resize the screen to larger than 600px width and press the button, this will fire the if statement and update the state of isActive
3. Now try resizing. the window width above and below 600px

Current behavior 😯

The component only rerenders when resizing the window when the media query does not match

Expected behavior 🤔

I expect the component to also rerender when the media query matches

Context 🔦

No response

Your environment 🌎

No response

[oliviertassinari]

I don't see a bug, it seems to behave correctly. How is it not correct? Do you have a recording?

[pavsidhu]

Hopefully this video helps:

https://user-images.githubusercontent.com/4911505/218770738-a6ca36c6-6b33-410e-b005-b0078bb535f0.mov

Do you see how the component doesn't rerender after the button is pressed?

[michaldudak]

I'm not able to reproduce it. @pavsidhu, could you please share details about your environment?

[pavsidhu]

Sure, the browser used in that example was Microsoft Edge Version 110 running on a M1 Macbook Pro Ventura 13.0.1

[michaldudak]

I couldn't reproduce it on Edge (I've got v111), but it happened once in Safari. I couldn't repeat it, though. It seems there is a subtle bug somewhere.

[zhengjitf]

Steps:

1. Increase and decrease the window width so you can see the media query updates correctly in the console
2. Resize the screen to larger than 600px width and press the button, this will fire the if statement and update the state of isActive
3. Now try resizing. the window width above and below 600px

For these steps, I couldn't reproduce the issue. But I can reproduce the issue following the steps of the given video.

Steps:

1. Increase and decrease the window width so you can see the media query updates correctly in the console
2. Resize the screen to less than 600px width and press the button, then resize the screen to larger than 600px
3. Now try resizing. the window width above and below 600px, the component will just rerender when the media query matches

It should be the problem with useSyncExternalStore. I found something by debugging the given example. Finally, I found that this issue has been fixed by Fix useSyncExternalStore dropped update when the state is dispatched in render phase but hasn't been released to the latest stable version. So maybe need to wait for the next react stable version?

PS: I only change react version to 18.3.0-next-d49e0e0be-20230302, it works well, see the revised example.

[michaldudak]

Thanks for investigating it. Let's wait for 18.3, then. I'm labelling it as "external dependency".

[MaltesBytes]

+1

[kgregory]

This hasn't been addressed in 18.3.1 but is fixed in the 18.3.0 canary. Does anyone know if there's another React 18 version coming?