useSyncExternalStore

πŸ¦‰ When you have a design that needs to be responsive, you use media queries to change the layout of the page based on the size of the screen. Media queries can tell you a lot more than just the width of the page and sometimes you need to know whether a media query matches even outside of a CSS context.
The browser supports a JavaScript API called matchMedia that allows you to query the current state of a media query:
const prefersDarkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
console.log(prefersDarkModeQuery.matches) // true if the user prefers dark mode
πŸ‘¨β€πŸ’Ό Thanks for that Olivia. So yes, our users want a component that displays whether they're on a narrow screen. We're going to build this into a more generic hook that will allow us to determine any media query's match and also keep the state in sync with the media query. And you're going to need to use useSyncExternalStore to do it.
Go ahead and follow the emoji instructions. You'll know you got it right when you resize your screen and the text changes.
πŸ¦‰ If we really were just trying to display some different text based on the screen size, we could use CSS media queries and not have to write any JavaScript at all. But sometimes we need to know the state of a media query in JavaScript for more complex interactions, so we're going to use a simple example to demonstrate how to do this to handle those cases and we'll be using useSyncExternalStore for that.

Please set the playground first

Loading "useSyncExternalStore"
Loading "useSyncExternalStore"
Login to get access to the exclusive discord channel.
  • 🎣Hooks
    General
    Terminal error when setting playground
    Natiq πŸš€:
    Every time I click on the "SET TO PLAYGROUND", the app stops with the following error. How can I fix...
    1 Β· 6 days ago
  • General
    Welcome to EpicReact.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • πŸš€6
    59 Β· 8 days ago
  • πŸ”₯Advanced APIs
    Question about useReducer
    Tolu:
    I was just wondering if there's a reason to specify both initial state and an initializer function w...
    • βœ…1
    4 Β· a month ago
  • πŸ”₯Advanced APIs
    Questions about the State Optimization exercise in Epic React
    DBattou πŸš€:
    in the **"Optimize state updates"** exercise (/exercise/02/01/solution) in the** "Advanced reat api"...
    • βœ…1
    4 Β· 2 months ago
  • General
    error when installing the MCP server
    DBattou πŸš€:
    I tried to install the mcp server by following the instructions on the blog post here -> https://www...
    • πŸ‘1
    • βœ…1
    8 Β· 2 months ago
  • πŸ”₯Advanced APIs
    playground
    richardreveron πŸš€:
    Hey guys, I am trying to work with the playground but I get an error on the html, pointing to the in...
    • βœ…1
    2 Β· 3 months ago
  • General
    Interviews with Experts -> Start Watching CTA gives regional restricted license error
    .shreyasvaidya πŸš€:
    I have purchased my course from India with the regional pricing method, and I am trying to watch the...
    • βœ…1
    4 Β· 4 months ago
  • General
    You are offline - warning
    marianavinyolas 🌌 πŸš€:
    Hi there! Today I want to start with the Advanced Patterns workshop, but after clone and run the rep...
    • βœ…1
    3 Β· 4 months ago
  • General
    βš›οΈFundamentals
    Clicking on index.html when start opens in Terminal and not on the editor.
    Waddle πŸš€:
    Hello, just starting out with this and noticed that when I click on the 'index.html' file as display...
    • βœ…2
    1 Β· 4 months ago
  • General
    Am I following the course in the proper way?
    bauti πŸš€ 🌌:
    The way im doing things in epic-react is: Clone the repo for the module i want to do (for example a...
    • βœ…1
    3 Β· 4 months ago
  • 🎣Hooks
    General
    VSCode imports from wrong source
    mathemaat πŸš€:
    I encountered something silly that threw me off for a minute or two. I was working on the Tic Tac To...
    • βœ…1
    1 Β· 5 months ago
  • General
    Terminal Errors When Running Workshop App
    Giovanni πŸš€:
    Hello guys, I am facing an issue with the Workshop App, that basically I get this message over and...
    • βœ…1
    3 Β· 5 months ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans 🌌 πŸš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • βœ…2
    6 Β· 10 months ago
  • General
    Cannot connect workshop app
    Philipp πŸš€:
    I try to connect with my Company MacBook and get the following error 😦 There was an error: unable t...
    • βœ…1
    5 Β· 6 months ago
  • General
    Problem generating the diff
    mikeyjmcc πŸš€:
    I am not sure what has changed but I am now receiving errors that the diff cannot be generated. This...
    • βœ…2
    1 Β· 6 months ago
  • General
    Problem with playground
    Xrayoptions πŸš€:
    Problem section doesn't show <@105755735731781632> how to fix it ?
    • βœ…1
    9 Β· 6 months ago
  • General
    How to run tests in IDE?
    anonymousBlack10:
    Is it possible to run the tests from the IDE or are they setup to be run just from the browser? Some...
    • βœ…1
    1 Β· 7 months ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet πŸš€ πŸ† 🌌:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • βœ…1
    15 Β· 9 months ago
  • General
    AI Assistant?
    John πŸš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • βœ…2
    2 Β· 9 months ago
  • General
    Script to save playground folder
    larissapissurno πŸš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • βœ…1
    2 Β· 9 months ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus πŸš€ 🌌:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • βœ…1
    1 Β· 9 months ago
  • General
    βš›οΈFundamentals
    Error boundary good practice
    Lloren πŸš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • βœ…1
    1 Β· 9 months ago