Xstate: useService isn't returning the state on first render

[Blacktiger]

Description
When I try to useService, I'm finding that the current state isn't being returned correctly.

Expected Result
The state should be available for use on first render of the component.

Actual Result
The state is undefined.

Reproduction
https://codesandbox.io/embed/crimson-http-eksyg?fontsize=14&hidenavigation=1&theme=dark

Additional context
On my local machine I'm on the latest @xstate/react (0.8.1). The code installed in node modules is clearly only setting current to service.state and not service.state || service.initialState.

function useService(service) {
    var _a = __read(react_1.useState(service.state), 2), current = _a[0], setCurrent = _a[1];
    react_1.useEffect(function () {
        // Set to current service state as there is a possibility
        // of a transition occurring between the initial useState()
        // initialization and useEffect() commit.
        setCurrent(service.state);
        var listener = function (state) {
            if (state.changed) {
                setCurrent(state);
            }
        };
        var sub = service.subscribe(listener);
        return function () {
            sub.unsubscribe();
        };
    }, [service]);
    return [current, service.send, service];
}

[Blacktiger]

Should I just upgrade to 1.0.0-rc1 or is this something that will be fixed on a non-release candidate version?

[davidkpiano]

@Blacktiger Does it work as expected with 1.0.0-rc1?

[Blacktiger]

I tried an upgrade and it seems ok. I'm only using useMachine and useService so I suppose as long those are working fine for me it should be fine to just upgrade. I just didn't have that version initially since npm install doesn't without spelling the version out.

[Blacktiger]

I'd think if you want to close this issue, it's ok since there is a working version but it might be better to leave it open until there is a "stable" version released?

[davidkpiano]

I'll leave it open and we'll release @xstate/react and @xstate/vue v1 soon!

[alexreardon]

I'm not sure if this is the same issue, but it appears as though the service being returning from useMachine is not initialized so it has no state on the first render unless you start the service yourself:

https://codesandbox.io/s/vigilant-solomon-nfzxw

[alexreardon]

I can confirm that the service is initialized on initial render for rc.3

https://codesandbox.io/s/mystifying-sun-q2hgc

[alexreardon]

Things don't seem to be working if you use @xstate/fsm: https://codesandbox.io/s/boring-rubin-5104z

[alexreardon]

Also for some reason the codesandbox was saying that I needed xstate to use @xstate/react 🤷‍♂

[Andarist]

Things don't seem to be working if you use @xstate/fsm: https://codesandbox.io/s/boring-rubin-5104z

That's because you were trying to use useService for xstate, just import it from @xstate/react/lib/fsm: https://codesandbox.io/s/frosty-night-j6muu

Also for some reason the codesandbox was saying that I needed xstate to use @xstate/react 🤷‍♂

Can't quite repro this, but it might be related to the former problem.

[ivorpad]

I'm having this exact same issue:

TypeError: Cannot read property 'state' of undefined

  107 | exports.useMachine = useMachine;
  108 | function useService(service) {
> 109 |     var _a = __read(react_1.useState(service.state), 2), current = _a[0], setCurrent = _a[1];
  110 |     react_1.useEffect(function () {
  111 |         // Set to current service state as there is a possibility
  112 |         // of a transition occurring between the initial useState()

  4 | function Child({service}) {
  5 | 
> 6 |   const [state] = useService(service)
  7 | 
  8 |   console.log({ childrenValue: state.value });

Once the child reaches its final state the service is undefined and the app crashes.

Repro: https://codesandbox.io/s/heuristic-dew-b2h23?file=/src/child.machine.js (uncomment type: "final" and comment always: "idle")

[davidkpiano]

@ivorpad Try @xstate/[email protected] to verify that it solves the issue.

[davidkpiano]

Closing this as the latest released work on @xstate/react RC resolves this.