How can I initialize xstate context with component props?

[github0013]

I am trying to figure out how I can update context based on component props.

I think this example shows a way to initialize context value using another atom. If the atom was coming from another component or something, I think this is reasonable.
https://docs.pmnd.rs/jotai/integrations/xstate

However, if you just wanted to initialize context values with component props, is it possible?

This obviously doesn't work, I know.

interface Context {
  name: string
  value: string
}

const machine = createMachine<Context>({
  initial: "idle",
  context: {
    name: "some name",
    value: "",
  },
  states: {
    idle: {},
  },
})

const Component: React.FC<Props> = ({ value }) => {
  machine.withContext({
    ...machine.context,
    value
  })
  const machineAtom = atomWithMachine(machine)
  const [state, send] = useAtom(machineAtom)

  return (
    <>
      <p>{state.context.name}</p>
      <p>{state.context.value}</p>
    </>
  )
}

I am thinking there can be another way to pre-populate the context without using another atom when to initialize a machine atom... or not?

[dai-shi]

We just had some discussions recently in the closed PR #289.
So, if we need create a machine using component props, it means we need to create within the component lifecycle.

const Component = ({ props }) => {
  const machineAtomRef = useRef()
  if (!machineAtomRef) {
    machineAtomRef.current = atomWithMachine(...)
  }
  ...
}

I think we should create a codesandbox example for this.
Since you raised this discussion, would you be willing to help?

[dai-shi]

I think it's out of jotai's Provider scope?

Yes and no.

With the useRef approach, we would need to pass the machine atom either with props or react context.

However, if I were to do it in a jotai way, I'd put the machine atom in another atom.
Hm, I don't use useRef in this case, but it's delayed for other components to use the machine atom.

const machineAtomAtom = atom(null)

// useProduct.ts
const useProduct = (product: Product) => {
  const [machineAtom, setMachineAtom] = useAtom(machineAtomAtom)
  const nextMachineAtom = machineAtom || atomWithMachine(get => {
    productMachine.withContext({
      product
  })
  useEffect(() => {
    setMachineAtom(nextMachineAtom)
  }, [setMachineAtom, nextMachineAtom])
  const [state, send] = useAtom(nextMachineAtom)

  ...
  return [state, send]
}

I wonder if we should recommend this pattern. Isn't it too complicated? Better than bare context?

I, however, find it difficult to implement it without an extra re-render nor a state guarding (this is the major thing that I want to solve here).

If I understand it correctly, this issue is different from initializing machine with props.

I would create a derived atom.

const hasProductAtom = atom((get) => get(machineAtom).matches("hasProduct"))

Or, use useUpdateAtom and selectAtom.

const Component = ({ product }) => {
  const hasProduct = useAtom(selectAtom(machineAtom, useCallback((state) => state.matches("hasProduct"), []))
  const send = useUpdateAtom(machineAtom)
  
  React.useEffect(() => {
    // this will not cause a re-render
    send({type: "SET", product})
  }, [product])

  // guarding
  if(!hasProduct){
    return null
  }

  return (
    <>
      <Product />
    </>
  )
}

Hope it helps expanding your ideas.

[github0013]

YES, complicated. So hard to see and follow what's going on. And I still think if we declare a hook like const useProduct = (product: Product), any of the child components are required to have the reference to the product object, no? So that it defeats the purpose of using state management like Jotai?

I guess if I were to try, I think I could do something like ..

const productAtom = atom(null)

const useProduct = () => {
  const [product] = useAtom(productAtom)
  const machineAtomRef = useRef()
  if (!machineAtomRef && product) {
    machineAtomRef.current = atomWithMachine(get => {
      productMachine.withContext({
        product
      })
    })
  }
  ...

  return [state, send]
}

const Page: React.FC<Props> = ({product}) => {
  const [_, setProduct] = useAtom(productAtom)
  const [state, send] = useProduct()

  React.useEffect(() => { setProduct(product) }, []) 

If I understand it correctly, this issue is different from initializing machine with props.

const hasProduct = useAtom(selectAtom(machineAtom, useCallback((state) => state.matches("hasProduct"), []))
const send = useUpdateAtom(machineAtom)

Oh ok, yes this will suppress the re-render, but it's still kinda looking silly to check if I have proper objects in context to just get started.

• re-render
• if guard

For an instance, if I were to use XState + React's context

const Context = React.createContext({})
const machine = createMachine({})

const Page: React.FC<Props> = ({product}) => {
  const [state, send] = useMachine(machine.withContext({product}))
  // at this point state.value == "hasProduct", so no guarding required
  // but I like to use Jotai, tired of using React context
  return(
    <Context.Provider value={{state, send}}>
      ...
    </Context.Provider>
  )
}

This ensures the state has access to context.product in the child components from their first render (re-rendering doesn't happen at the initialization here, and no if guarding statement).
So compared to this, XState + Jotai, to me, it forces me to do an extra rendering + if guard, which is ok to write (not much anyways), but I kinda felt there could be a better way to avoid them it.

[dai-shi]

I'm not 100% following because I'm still new to xstate best practices.

If you can have a productAtom, then you will be able to use that to create a machine.

const productAtom = atom(null)

const machineAtom = atomWithMachine((get) => productMachine.withContext({
  product: get(productAtom),
}))

But, notice that it will create a new machine if you set a new product.

This ensures the state has access to context.product in the child components from their first render (re-rendering doesn't happen at the initialization here

Okay, so if-guard was not something desirable.

As you component seems Page, I guess you can have a separate provider (if not atom.scope may help.):

const productAtom = atom(null)

const productMachineAtom = atomWithMachine((get) => productMachine.withContext({
  product: get(productAtom),
}))

const Page = ({product}) => {
  return (
    <Provider initialValues={[[productAtom, product]]}>
      ...
    </Provider>
  )
}

// This is under `Page` component
const Component = () => {
  const [state, send] = useAtom(productMachineAtom)

  // machine context should already have product, or not?

  return (
    <>
      <Product />
    </>
  )
}

I'm not sure if this is what you want, and it's different from the original question (create a machine atom with props).

[github0013]

Sorry if I am having you confused. Yes, thank you @dai-shi. I think <Provider initialValues= was the way to go. I didn't read the document carefully enough.

The code below at the console.log("state.context.product:", state.context.product), I saw the product object right from the first render.

• re-render
• if guard

It is pretty mind-twisting to me, but it does the job I was looking for. Never thought of doing it this way.

next.js page

import { Atom, atom, Provider } from "jotai"
import { atomWithMachine } from "jotai/xstate"
import { GetServerSideProps } from "next"
import React from "react"
import ProductDetails from "src/components/ProductDetails"
import productMachine, { Product } from "src/machines/product"
interface Props {
  product: Product
}

const productAtom = atom<Product, Product>(null, (get, set, update) => {
  set(productAtom, update)
})

export const productMachineAtom = atomWithMachine((get) =>
  productMachine.withContext({
    product: get(productAtom),
  })
)

const Page: React.FC<Props> = ({ product }) => {
  // unless otherwise typescript won't like it
  const element: [Atom<Product>, Product] = [productAtom, product]

  return (
    <Provider initialValues={[element]}>
      <ProductDetails />
    </Provider>
  )
}
export default Page

export const getServerSideProps: GetServerSideProps = async (context) => {
  const product: Product = {
    name: "abc123",
    price: 123,
  }

  return {
    props: {
      product,
    },
  }
}

product component

import { useAtom } from "jotai"
import { productMachineAtom } from "pages/page"
import React from "react"
interface Props {}

const ProductDetails: React.FC<Props> = (props) => {
  const [state, send] = useAtom(productMachineAtom)

  console.log("state.context.product:", state.context.product)
  return <></>
}
export default ProductDetails

[dai-shi]

It is pretty mind-twisting to me, but it does the job I was looking for. Never thought of doing it this way.

To tell the truth, I hadn't thought about using initialValues for such use cases, until we discussed this here. This may open up a new pattern to bridge component props and atoms.

On the other hand, initialValues is designed for SSR. It's to solve the problem that atom values should be available in the initial render. So, as you seem to use nextjs, it's the valid and expected usage.

[dai-shi]

I just published a course related to this: https://twitter.com/dai_shi/status/1528897398839611392

Lesson 4 and 5 discuss about creating xstate machines from component props.

[github0013]

These days, I use this pattern to initialize xstate machine, and use the service all around the components.

I use next.js, so you have a page then your components in the page (<Form/> in this case).

I think the key is to use

• Provider initialValues
• useInterpret
• useSelector

This may not be the best performant way for React rendering, but at least to me, it's clean and easy to understand boilerplate.

I am sure there are many flaws in this solution, but can you think of any ways to make this better?

import React from "react"
import Head from "next/head"
import { useInterpret } from "@xstate/react"
import { Atom, Provider } from "jotai"
import { createYourMachine, Form, Service, serviceAtom } from "src/components/YourComponent"

interface Props {
  yourProps: any
}

const YourNextJsPage: React.FC<Props> = ({ yourProps }) => {
  const service = useInterpret(createYourMachine(yourProps))
  const element: [Atom<Service>, Service] = [serviceAtom, service]

  return (
    <Provider initialValues={[element]}>
      <Head>
        <title>Your Page</title>
      </Head>

      <Form />
    </Provider>
  )
}
export default YourNextJsPage

src/components/YourComponent/index.ts

import Form from "./Form"
export * from "./atoms"
export * from "./machine"
export { Form }

src/components/YourComponent/atom.ts

import { atom, useAtomValue } from "jotai"
import { Service } from "./machine"

const serviceAtom = atom<Service, Service>(null, (get, set, update) => {
  set(serviceAtom, update)
})

const useService = () => useAtomValue(serviceAtom)

export { serviceAtom, useService }

src/components/YourComponent/machine.ts

import { actions, createMachine, InterpreterFrom } from "xstate"

...
...
const createYourMachine = (yourProps: any) =>
  createMachine<Context, Event> ...
...

export type Service = InterpreterFrom<ReturnType<typeof createYourMachine>>
export { createYourMachine }

src/components/YourComponent/Form.tsx

import React from "react"
import { useSelector } from "@xstate/react"
import { useService } from "./atoms"

interface Props {
  yourProps: any
}

const Form: React.FC<Props> = ({ yourProps }) => {
  const service = useService()
  const whateverFromTheMachine = useSelector(service, (state) => ...)

  return ...
}

[dai-shi]

Thanks for sharing your idea. I think it works fine for your case.

From the library perspective, jotai/xstate integration is not React specific. So, it shouldn't depend on @xstate/react package.
#938 is an issue that jotai/xstate can't support yet what @xstate/react does support.