00:00 As much as I love React and the, like, the state management and everything, sometimes you've got to integrate with stuff that's external to the React world and in our little React bubble. And we need to synchronize the state of our geolocation, as this example will show.

00:16 Or maybe we've got a third-party package that's managing a subscription to some WebSocket or something. There are many situations where there's external state being managed and we want to synchronize our little world with that external state.

00:32 So we're going to use SyncExternalStore to do this. So here's a little example of what this is like. We're going to pretend that we're building an app that uses our geolocation. And so we have our location data type, so it's either unavailable with no geoproperty

00:50 or it's available with a geoproperty, that is a geolocation position. We initialize our external store. This is the external store right here, that location object. And its status is currently unavailable. So then we have this function called SubscribeToGeolocation.

01:07 And that accepts a special callback that React will provide for us. And anytime our store changes, we call this callback. So here we set up a watch position on the geolocation. Anytime the position changes, we're going to update our store. The location will update to have that position.

01:26 And then we'll let React know, hey, the store changed. Just wanted you to know that. We don't pass it anything. We don't expect anything back from it. We're just letting them know, ping, this thing changed. And then we also, from our SubscribeToGeolocation, we're going to return a cleanup function.

01:42 So when React is done subscribing to this, it will clean up and we avoid memory leaks and using the user's battery on tracking their geolocation, all that stuff. And then we also have this GetGeolocationSnapshot. And this just returns the current store,

02:02 whatever the current value of the store is. And with that now, we can use External Store with the subscription and the GetGeolocationSnapshot to get the latest version of the location. And any time it changes, whenever we call this callback that React has given us, we're just like, hey, React, this changed.

02:22 Then React is going to call our GetGeolocationSnapshot when it's good and ready. And it will give us the current location. Then we can render our UI based on that. And any time it changes, we're going to get the latest version. We can render the latest UI based on the latest version of whatever's happening outside of React.

02:39 And that is UseSyncExternalStore. It's pretty cool. There's one other interesting thing about it, and that is the GetServerSnapshot, which allows you to handle this on the server side.

02:48 So if we're doing this for our example here with location geocords, whatever, our geolocation app, then we probably just have it return a status of unavailable because this is a browser API.

03:05 So it wouldn't really make sense or we wouldn't be able to determine that very specifically. Although I suppose you could use the IP address to try and triangulate it. But that's the point is that you have the capability of providing some value for that server render.

03:21 So the HTML that is sent over to the client has something or maybe nothing that is requisite for you to render that initial value. And then once it's hydrated and everything, React will go and subscribe and any updates will be noted. So that is UseSyncExternalStore.

03:41 What we're going to be subscribing to is the browser width, specifically a media query. Whenever the media query changes, then our text here should change. So we'll talk about that more in the exercise. See you there.