Xstate: useService logs warning about uninitialized service when service is passed to child component

[kevinold]

Description
In v4.7.0-4.9.0 a warning is logged to the console when calling useService on a service prop.

Expected Result
No warning.

Actual Result
Warning: Attempted to read initial state from uninitialized service 'toggle'. Make sure the service is started first.

Reproduction
https://codesandbox.io/s/xstate-react-template-uninitialized-service-warning-cz351

Additional context
Note that the machine is created at the top of the application (App) and passed to a child (Child).

[davidkpiano]

This behavior likely occurred in 4.8.x as well, can you check there?

[kevinold]

@davidkpiano Yes, checked all the way back to 4.7.0 where this issue begins. It was not present 4.6.7 and 4.7.0 RC's throw errors.

[seloner]

@davidkpiano Is any work around for that ? I am trying to put the service in React Context and consume it after but I am getting the same error .

[davidkpiano]

Try updating to the latest xstate and @xstate/react@next; the warning is no longer there.

[seloner]

@davidkpiano I am on "@xstate/react": "^0.8.1", and "xstate": "^4.9.1" and I am still getting the warning . I am getting the Interpreter  from context but the useService is returning undefined so I can not use the machine .

[davidkpiano]

Does the app otherwise work fine? If so, you can ignore the warning for now.

[seloner]

@davidkpiano
It is not wokring. I am getting undefined in the useService Hook and not only on mount.It does not change.

My workaround is to pass into React context, [state,send] from UseMachine instead of the service . I can provide a code sandbox if you want.

[seloner]

@davidkpiano in @xstate/react/v/1.0.0-rc.4 I have no problem . Is it safe to use the next version for production ?

[seloner]

@davidkpiano
In versions after 1.0.0-rc.1 when you try to put initial context in the Machine like the example in docs
https://xstate.js.org/docs/guides/context.html#initial-context I am getting this warning

Machine given to useMachine has changed between renders. This is not supported and might lead to unexpected results.
Please make sure that you pass the same Machine as argument each time.

In versions before 1.0.0-rc.2 I am getting the service warning .

Sandbox : https://codesandbox.io/s/great-herschel-9opwh?file=/src/App.js

I guess its just a warning a not a bug ?

[davidkpiano]

@seloner Prefer this:

  const [state, send] = useMachine(counterMachine, {
    context: someContext // initial context
  });

[Andarist]

@seloner the problem is that useMachine can only ever work with the same instance of a machine. Machines need to have static config - and it's not possible to change this for a particular useMachine call. The warning exists to avoid confusion that you could actually provide a different argument there - and as you are calling withContext each render it creates a new Machine each render and we can't recognize them being the same between renders so it's up to you to memoize it correctly or use @davidkpiano's suggestion

[seloner]

@Andarist I want to persist state also. I am getting no warning ,I guess its ok to do it like that ?

[davidkpiano]

This is now fixed in the latest @xstate/react RC.