00:00 Let's start by creating a getSnapshot function. So getSnapshot, and this is going to snapshot or return the matchMedia thing. So we're going to say window.matchMedia, and here is our media query.

00:16 In fact, let's take this, and we'll just grab it from here. There we go. And here's our media query. So this is how we determine at any given point, is this value, does this query match? Great, so we don't have to store that anywhere.

00:36 The browser stores it for us. We can just grab it at any time. Great, so now we can make a function called subscribe, which accepts a callback. It is just, we don't really care about what it returns or what the callback returns. We return our cleanup. And in here, we need to add an event listener on this match

00:55 media thing. So let's add our media query list from window.matchMedia with our media query. And then we'll add a change event listener, and we'll just pass the callback. Just like here react, it changed.

01:12 And from there, in our return callback, our cleanup, we can just say remove that event listener so we don't have any memory leaks or any of that problem. And that's it. We created a subscribe. We created a getSnapshot.

01:28 So we are ready to use sync external store for our isNarrow state. Subscribe, getSnapshot, boom. And now, I am on a narrow screen. And if I grab this, I'm on a wide screen. Narrow, wide, narrow, wide, it's amazing.

01:47 And it's all synchronized using just web platform, add event listener, and use sync external store. The external store is the browser. The browser has the state for the width, or specifically whether this media query matches. Works great.