useMachine v4 to v5 confusion.

[razodactyl]

The documentation for xState v5 is a bit confusing in regards to setting the initial context in React.

I'm using the @xstate/react library - It says we can join the Discord discussion but the link 404s.

v4 example of useMachine (FROM THE TOP OF MY HEAD)

const myMachine = createMachine({
  ...
  context: {
    myResourceId: "initial_value_goes_here",
  }
})

const Component = ({ documentId }) => {
  const [state, send] = useMachine(myMachine, {
    context: {
      myResourceId: documentId
    }
  })
}

// We can't do `state.context.myResourceId = documentId` since it's not recommended, so above was what I did previously.

---

v5 example of useMachine

I found my answer in the xstate react tests

const myMachine = createMachine({
  ...
  types: {} as {
    context: { myResourceId: string }
    input: { myResourceId: string }
  },
  context: ({ input }) {
    myResourceId: input.myResourceId || "initial_value_goes_here",
  }
})

const Component = ({ documentId }) => {
  const [state, send] = useMachine(myMachine, {
    input: {
      myResourceId: documentId // We can now pass the appropriate `documentId` in through props without setting `state.context` manually or going through some other weird setup.
    }
  })
}

---

Sorry for the mess above, my mind is overloaded with A LOT of xState concepts and would greatly appreciate input from anyone better in the know than me!

[davidkpiano]

Sorry for the overload. This is part of the migration guide: https://stately.ai/docs/migration#set-context-with-input-not-machinewithcontext