xstate: useMachine stops working after fast refresh

This isn’t limited to the fast refresh of React native. I’ve been using fast-refresh in my CRA project for quite a while now using https://github.com/esetnik/customize-cra-react-refresh. I had to manually refresh the browser on every change as the machines stopped handling events. That being said, the state was always preserved correctly.

@Andarist if you would you rather debug this with normal React, I can create a CRA fast refresh Codesandbox for you? 😊

I’m having the same problem in next.js now they’ve started using fast-refresh. Here’s a tiny example of it breaking using next: https://github.com/idlefingers/next-xstate-fast-refresh-bug

Hope that helps!

I’m too familiar with Fast Refresh design, does anyone have a link to its technical details?

I’ve investigated your repro (thanks for it!) with our @xstate/react@next (so a different one that you have installed there). What I’m observing is that our effect gets “remounted” - its cleanup (service.stop()) is being called even though [] is passed as inputs so it should only be cleaned up when unmounting. However, I’ve seen the React team mentioning that in the future this might change and effects could potentially “remount” like this at different occasions as well. How this will work is still an unknown to me so I wouldn’t like to plan ahead for it too much, unless we would be able to figure this out quickly.

So the problem here is that we stop the machine when fast refresh happens - things like state & refs are being preserved as the whole component is not being remounted. I’m honestly not sure what we should do here - we could try to restart stopped machine by supplying initial state to it (which we should be able to read from the stopped service), but this really sounds like a can of worm. We ideally would like to have our effect not being remounted as we’d like to have a guarantee that its lifetime (and thus our machine’s) is exactly the same as the component’s lifetime.

So I ended up trying out the hook that was used in this youtube video https://youtu.be/73Ch_EL4YVc I rewrote it to typescript, and that ended up working fine. Here’s the code for anyone interested:

import React, { useEffect, useMemo, useState } from 'react';
import {
  EventObject,
  interpret,
  Machine,
  StateMachine,
  Typestate,
  State,
  Interpreter,
} from 'xstate';

export const useMachine = <
  TContext,
  TEvent extends EventObject,
  TTypestate extends Typestate<TContext> = any
>(
  machine: StateMachine<TContext, any, TEvent, TTypestate>,
): [
  State<TContext, TEvent, any, TTypestate>,
  Interpreter<TContext, any, TEvent, TTypestate>['send'],
] => {
  const [current, setCurrent] = useState(machine.initialState);

  const service = useMemo(
    () =>
      interpret(machine)
        .onTransition(state => {
          if (state.changed) {
            setCurrent(state);
          }
        })
        .start(),
    [],
  );

  useEffect(() => {
    return () => service.stop() as any;
  }, []);

  return [current, service.send];
};

My biggest suspicion lies with the use of useConstant instend of useMemo, but I haven’t been able to confirm that yet.

I’m afraid that we are not React Native developers on a daily basis and fast refresh is not yet available on the web, so we don’t quite know how it works exactly and what kind of constraints does it impose. From what I understand it should “just work”, but apparently it doesn’t. Could you dig into this deeper to provide us more information about the problem?

I’m having the same problem in next.js now they’ve started using fast-refresh. Here’s a tiny example of it breaking using next: idlefingers/next-xstate-fast-refresh-bug

Hope that helps!

I’ve confirmed that the fast refresh bug in this repo no longer occurs with the latest version of @xstate/react (version 1+).

@gaearon I’ll be filing the issue in the following days. Thanks for the brainstorming offer 👍

@Andarist I’ve changed the useConstant to:

  const latestStateRef = React.useRef(null)

  const service = React.useMemo(() => {
    const machineConfig = {
      context,
      guards,
      actions,
      activities,
      services,
      delays,
    }

    const createdMachine = machine.withConfig(machineConfig, {
      ...machine.context,
      ...context,
    })

    return interpret(createdMachine, interpreterOptions)
      .start(
        rehydratedState
          ? State.create(rehydratedState)
          : latestStateRef.current
          ? State.create(latestStateRef.current)
          : undefined
      )
      .onTransition((state) => {
        latestStateRef.current = state
      })
  }, [])

It worked like a charm. latestStateRef was used to enable rehydration.

Here’s the full hook if you want to test:

import React from "react"
import { State, interpret } from "xstate"

export default function useMachine(machine, options = {}) {
  const {
    state: rehydratedState,
    context,
    guards,
    actions,
    activities,
    services,
    delays,
    ...interpreterOptions
  } = options

  let latestStateRef = React.useRef(null)

  const service = React.useMemo(
    () =>
      interpret(
        machine.withConfig(
          {
            context,
            guards,
            actions,
            activities,
            services,
            delays,
          },
          {
            ...machine.context,
            ...context,
          }
        ),
        interpreterOptions
      )
        .start(
          rehydratedState
            ? State.create(rehydratedState)
            : latestStateRef.current
            ? State.create(latestStateRef.current)
            : undefined
        )
        .onTransition((state) => (latestStateRef.current = state)),
    []
  )

  const [state, setState] = React.useState(service.state)

  React.useEffect(() => {
    service.onTransition((state) => {
      if (state.changed) {
        setState(state)
      }
    })

    setState(service.state)

    return () => service.stop()
  }, [])

  React.useEffect(() => {
    Object.assign(service.machine.options.actions, actions)
  }, [actions])

  React.useEffect(() => {
    Object.assign(service.machine.options.services, services)
  }, [services])

  return [state, service.send, service]
}

@CodingDive It’s the same as I’m getting with react native. I also updated and tested with 1.0.0-rc.3 which gives me the same warnings as I mentioned earlier.