Syncing with External Stores

[00:00:00]
>> David Khourshid: Great. So I want to quickly talk about just two other things and the first thing I want to talk about is the USync external store hook, which I really like. Yeah, so USync external store is one of those really underrated hooks. It's one of those hooks that are used in third party libraries mostly and only sometimes in real world applications.

[00:00:27]
Although once you see it and once you get used to it, which we're going to practice in this exercise, you're going to see just how useful it can be and how it actually reduces the amount of code that you have to write. One of the common patterns that we do with UseState and UseEffect and managing state with something that is changing externally is this imperative flow of, for example, if we're checking if we're online or not, we had this UseEffect, which is subscribing to the window online offline listener.

[00:01:00]
This example is also in the React docs and we're setting is online based on whether the navigator is online or not. And then we're returning that we're saying if it's online, show online, otherwise show offline. And it's going to work fine, but there might be potential problems with this approach, such as race conditions or hydration mismatches, which is one of those annoying errors that you get with Next js, which is a combination of server-rendered pages and dealing with the client side.

[00:01:39]
One of the things that you could do is actually use the USYncexternal store hook, and this actually works really well with browser APIs. The USYnce external store hook takes three arguments. The first one is a way to subscribe to some external source and so it takes a callback.

[00:01:58]
And so you could just, for example, when it's online or offline, you could just pass in that callback and then there is a function for getting whatever the current snapshot is according to the client. And then this one is pretty important and this one is alone responsible for just solving a whole host of hydration errors, which if you've run into them with next JS, they are pretty annoying.

[00:02:26]
But using USync external store allows you to avoid them by providing a consistent server snapshot where in this case we're assuming it's online. And as long as this stays consistent between the server and the client, then it's going to work with USync external store and, and next JS won't yell at you.

[00:02:48]
And then of course in this one we're just returning if it's online or not, and that's really all there is to it. To the USync external store hook.