---
title: "Discussion on \"React error #418: fixing a matchMedia hydration mismatch with useSyncExternalStore\" | Hashnode"
description: "Discussion on \"React error #418: fixing a matchMedia hydration mismatch with useSyncExternalStore\". Minified React error #418 on every page load came from reading window.matchMedia in a useState initializer. useSyncExternalStore fixed it."
url: "https://hashnode.com/posts/react-418-hydration-matchmedia/6af3b009c068f38b85719849"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [React error #418: fixing a matchMedia hydration mismatch with useSyncExternalStore](https://mohamedgado.hashnode.dev/react-418-hydration-matchmedia?utm_source=hashnode&utm_medium=feed)

Minified React error #418 on every page load came from reading window.matchMedia in a useState initializer. useSyncExternalStore fixed it.

7h ago · 7 min read · mohamedgado.hashnode.dev  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#webdev](https://hashnode.com/tag/webdev)
-   [#javascript](https://hashnode.com/tag/javascript)

## Written by

[Mohamed Gado](https://hashnode.com/@mohamedgado)

@mohamedgado · Tanta, Egypt

  
[View profile](https://hashnode.com/@mohamedgado)

Senior Software Engineer · React, Next.js, React Native · Building Masareef & Rafiq

Senior Software Engineer with 6+ years building web and mobile products in React, Next.js and React Native. I build and ship Masareef and Rafiq on my own. Originals live at mohamedgado.com/writing.

## Responses 1

Markdown supported · ⌘↵ to post

[OneLifeVibe](https://hashnode.com/@onelifevibe)

[6h ago](https://hashnode.com/posts/react-418-hydration-matchmedia/6af3b009c068f38b85719849/comment/6af3bbff0101e58733147a73)

The getServerSnapshot detail is the part I had not fully appreciated before — that it is used during hydration on the client, not just server rendering, which is why the first client render is forced to match the server's false instead of reading the browser value a moment too early. I also liked the decision to delete the mounted guard rather than keep it as a belt-and-braces: once the hook guarantees false on first paint, the sm:hidden CSS does the hiding with no JavaScript value at all. Did the one-frame flash — desktop users briefly getting the touch layout — ever show up visibly in the spotlight overlay, or does the re-render after hydration happen fast enough that it is only theoretical?