Shared States with useService

[00:00:00]
>> I wanna talk about how you could share machines between different components. And there's really in reacts there's two ways to do this, in XD just using XD in a general way there is one way which is interpreting that machine. And basically subscribing to that interpreted machine from anywhere, and we could essentially do the same thing with the use service hook.

[00:00:26]
So let's say that we have, actually let's take a look at a real example over here in the complete app. We have a clock, just go back to complete we have a clock over here that basically gives us the time. And let's select the time zone like somewhere in Africa, so this is showing the correct time.

[00:00:53]
And so we have this clock component and also we have this foreign clock components. What we want to do though, is we want to synchronize this with this. So basically we want to listen for changes on this machine and have it be reflected in that machine over there.

[00:01:14]
Now if you're coming from Redux or you're using just React with, use reducer, this might seem like a familiar problem. You have some global data which you want to somehow use everywhere. And so that goes both ways, both being able to update that data from somewhere. Or sending events from anywhere, and also being able to read that data from anywhere.

[00:01:40]
So the way we could do that in react is via context, over here I have local time context and I'm using creates context from react to do that. Keep in mind, by the way React context is different than XState contexts. Those two terms are basically very general terms, so just keep that in mind.

[00:02:05]
So this local context, we could provide the service and so what that's going to do is it's going to provide something that could be subscribed to. What's great about this is that this service, which is the third value returned from the tuple of use machine, that service will never change.

[00:02:29]
It's going to interpret this clock machine create a service, and since that service never changes. We're not gonna get any unnecessary renders because it's basically a live object that we could subscribe to, send events to, without fear of it changing. Now in our foreign clock component we could consume that service by using the use context hook.

[00:02:54]
So we use that local time context and we're going to grab that service. Now there is a machine provided by or sorry hook provided by XState called use service. It's similar to use machine in that you get both the States and we'll call this local time, send. You get both of those same arguments that you would get from use machine.

[00:03:18]
You pass in the service to use service and basically, you could read the state. And send in events just like you could do with a local machine inside of a use machine. So we're gonna basically listen to updates here and just like the lessons on using third-party libraries doing.

[00:03:40]
We are going to be listening for changes every time this local time states changes. So whenever it changes we're just going to send the time to our local machine over here. Which is this foreign clock machine and use that to keep it up to date with the current local time.

[00:04:05]
And so now if we go back here, we select the time zone, so I'll refresh select the time zone. Now both of those are gonna be kept in sync because we're communicating via components or sorry, via contexts in react. So that our components can listen to those changes and basically use them anywhere.

[00:04:29]
Now keep in mind that a service does not necessarily need to be defined within a react component. So you might not even need to use context to do this, again this depends on your use case. Using context is sort of the blessed way to do it by react, but basically, if that service comes from somewhere, you could use it in use service.

[00:04:55]
Any questions about that?
>> Yeah, so my to understand them that you could, for example, just create a machine and start the service and export.
>> So basically you could create a service from anywhere, have it exported as a module and then import that in basically any components.

[00:05:16]
Yes, you could technically do that, I'm not sure how well that's going to work with things like fast refresh and concurrent mode and things like that. But that does work, it definitely does work, or at least over here it works, so
>> I can tell you from experience it does not work well with fast refresh.

[00:05:39]
>> With fast refresh?
>> Yeah, react hot loading stuff, right obviously because it's not any side of react.
>> Yeah, so be careful of that with fast refresh if you're using fast refresh, especially in next JS apps. You might see some issues and honestly, that's because react wants control the state as much as possible but XState also wants to control the state.

[00:06:04]
So we are working on making it more compatible with fast refresh, but that's not an easy problem to solve. So [LAUGH] yeah and that's why I've been doing hard refreshes pretty often over here.
>> I was gonna ask to I mean so do you have the service, you could just interact with that service directly instead of running it through the hook, right?

[00:06:29]
>> Yeah, so the question was, can you just interact with a service directly if you have a reference to it instead of through the hook? Yes, you could absolutely do that, again for purposes of just being compliant in the future with fast refresh concurrent mode, stuff like that.

[00:06:47]
You would probably still want to use that hook, especially because the hook does more than just provide a reference to that service. It also manages subscriptions being able to seamlessly unsubscribe and re subscribe if a new service comes in. So yeah.