我没有看到错误，它似乎表现正常。它哪里不正确？你有录音吗？

希望这个视频能帮助到你：
Screen.Recording.2023-02-14.at.14.41.14.mov
你看到组件在按钮被按下后没有重新渲染吗？

我无法复现这个问题。@pavsidhu,你能分享一下你的环境详情吗？

当然，示例中使用的浏览器是运行在M1 Macbook Pro Ventura 13.0.1上的Microsoft Edge Version 110。

我无法在Edge(版本111)上复现这个问题，但在Safari上发生过一次。尽管如此，我无法重复这个现象。似乎某个地方存在一个微妙的bug。

步骤：

1. 增加和减少窗口宽度，以便在控制台中正确查看媒体查询的更新。
2. 将屏幕调整为大于600px宽度并按下按钮，这将触发if语句并更新isActive的状态。
3. 现在尝试调整窗口宽度在600px以上和以下。
   对于这些步骤，我无法重现问题。但是我可以按照给定视频中的步骤重现问题。
   步骤：
4. 增加和减少窗口宽度，以便在控制台中正确查看媒体查询的更新。
5. 将屏幕调整为小于600px宽度并按下按钮，然后将屏幕调整为大于600px
6. 现在尝试调整窗口宽度在600px以上和以下，组件将在媒体查询匹配时重新渲染。
   这应该是useSyncExternalStore的问题。通过调试给定的示例，我找到了一些东西。最后，我发现这个问题已经在Fix useSyncExternalStore dropped update when the state is dispatched in render phase but hasn't been released to the latest stable version中修复了。所以也许需要等待下一个React稳定版本？
   PS:我只更改了React版本到18.3.0-next-d49e0e0be-20230302,它运行得很好，参见修订后的example。

感谢您进行调查。让我们等待18.3版本，然后再做进一步的讨论。我将其标记为"外部依赖"。

+1

这个问题在18.3.1版本中没有得到解决，但在18.3.0的金丝雀版本中已经修复。有人知道是否还有另一个React 18版本即将发布吗？