Working with Vite hot reloading

[fnick851]

I write the state machine in the same file as a React component.
When I edit the file and trigger Vite hot reload, it shows:

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. 

As a result, I need to manually refresh the browser each time. So Vite hot reload is useless to me.

How can I make it work with Vite hot reload? Thanks.

[Andarist]

We are aware of the issues with hot-reloading and plan to work on fixing them. Unfortunately, this is just broken at the moment - it's because we are not capable (yet) of rehydrating the whole state into a new, incoming, machine (the new machine, the fast-refreshed one, can be completely different from the previous one after all).

[controversial]

Are there any updates on plans to improve the state of things here?

[Andarist]

There are no updates but, of course, we have plans to improve the situation around this. I'm afraid that this is a target for our next major version (on which we are working on).

[with-heart]

@Andarist what would that even look like? Do you know of another lib that has implemented rehydration support like that?

[bard]

A workaround I've been using is extracting a view component and moving it to a separate file, e.g. this:

// Foo.tsx

import { useMachine } from "@xstate/react";

const Foo: React.FC = () => {
  const [state, send] = useMachine(fooMachine);

  return (
    <div>
      {state.matches("ready") && <button onClick={() => send("EVENT")} />}
    </div>
  );
};

Becomes this:

// Foo.tsx

import { useMachine } from "@xstate/react";
import { fooMachine } from "./foo.machine";
import { FooView } from "./FooView";

const Foo: React.FC = () => {
  const [state, send, service] = useMachine(fooMachine);

  return <FooView service={service} state={state} />;
};

// FooView.tsx

import { fooMachine } from "./foo.machine";
import { InterpreterFrom, StateFrom } from "xstate";

const FooView: React.FC<{
  service: InterpreterFrom<typeof myMachine>;
  state: StateFrom<typeof myMachine>;
}> = ({ service, state }) => {
  return (
    <div>
      {state.matches("ready") && (
        <button onClick={() => service.send("EVENT")} />
      )}
    </div>
  );
};

This way, changes to FooView don't affect Foo and fast refresh works as usual.

(You should be able to pass send instead of service to FooView as well, I just wasn't able to find a SendFrom utility type akin to StateFrom and InterpreterFrom.)

Related: #2383, #1874, #995

[astahmer]

this worked perfectly, thanks !

[drewrawitz]

Same here, thank you so much for this!

[markhildreth-gravity]

I was able to get send working with the ActorRefFrom<typeof myMachine>['send'] type.

[davidkpiano]

Hot reloading should now work as expected with the latest XState and @xstate/react. Please give it a try and let us know if there are any further issues.