service.children empty when machine starts

[jzecca]

Description
I was looking for a way to use a "main" machine to handle the whole workflow of my React application (each screen of the app has its own machine, invoked by the main one).

My <App /> component just:

• looks at the current state of the main machine
• retrieves the corresponding invoked machine using service.children Map
• renders the proper screen with the invoked machine passed as props

Not sure this is the best solution (inputs are welcome!), but I came across something rather unexpected:

Expected Result
service.children should return current actors/invoked services.

Actual Result
service.children returns an empty Map on start, even if a service is invoked and runs properly.

Reproduction
Run the following sample and take a look at the console:
CodeSandbox

Starting by a transient state doesn't change anything, but delaying the first state seems to work (really ugly though).
You can test this by opening machines/main.js and changing initial state from step1 to:

• step0WithADelay
• step0WithATransientState

Additional context
XState 4.6.7

[davidkpiano]

Can you try this with xstate@next?

[jzecca]

Still empty: CodeSandbox

Something has changed when using the transient state workaround though:

The React component (Step1.jsx) is now rendered twice:

• service.children is empty on first render
• and OK on the second one.

[davidkpiano]

That's probably a "pre-bug" before 4.7 is released, but 4.7 shows actors/services in state.children directly, so this will work:

https://codesandbox.io/s/xstate-test-next-isy83

[jzecca]

Good catch, I didn't tried that!

It's still not working though: step1 is returned as an Object (not sure about it, but it looks like an Actor), while step2 is returned as an Interpreter.

The useService hook doesn't seem to like being fed this object :/

• Using the delay trick, both are Interpreter instances, as expected.
• Using the transient state trick, I get an Object on the first render, and an Interpreter on the 2nd one.

PS: btw, thanks a lot for your work and for looking at this issue! :)

[davidkpiano]

Looks like this is now fixed in 4.7.x

[davidhennemann]

Unfortunately the above error above is still happening for me as of today (with 4.8.0). Only workaround for me was using step0WithADelay as @zed-k described. Any ideas on this?

[cybervaldez]

Came across this issue myself today, here's a sandbox:
https://codesandbox.io/s/optimistic-ride-1izew?file=/src/index.js