Service not initialised when passed to React.Context

[duerdod]

Or is it my implementation of it?

I’ve created a small sandbox to replicate it: https://codesandbox.io/s/usingcontext-k0iqd. It doesn’t make much sense passing this machine in context, but I refitted a previously created machine.

The problem seems to be that the service isn’t initialised on mount. Because ‘manually’ starting it right after the useMachine call makes it all work (uncomment it in src/SubscriptionProvider).

It doesn’t sit right starting it (again and again?). Is this some caveat I should be aware of?

I’ve got a use case where I’d like to expose a set of events to different places in the UI (using the service context hook), and have the machine hook extended with services responding to transitions (used “internally” ie. not in the UI).

Also! Thank you for a wonderful library! 💅

[davidkpiano]

A quick workaround is to add a conditional existence check before rendering.

This will probably be solved in the upcoming @xstate/react v1.0, as the service is started immediately, or at least will have its state available immediately. It's a bit tricky to determine what to do here, since React has no notion of "initial effects", as the initial render is supposed to be without any effects, and service.start() is technically an effect.

[duerdod]

Ah! Figured. :)

I'll try rethink it without the context, or add this for now.

if (!service.initialized) {
  service.start()
}

Do we have this in mind for the upcoming 1.0, or should I open an issue (at least for discussion)?

[Andarist]

Do we have this in mind for the upcoming 1.0, or should I open an issue (at least for discussion)?

Yeah, we know about this problem but currently, it seems that releasing @xstate/react will require XState 5 to be released first and we are still working on that. You can check out a recent discussion about some of the problems with React integration here: #1239 (comment)