Example for how to enable hot-reload with xstate and use-machine libraries and an example project.

App.js

import React, { useContext } from "react";
import Dashboard from "./Dashboard";
import Login from "./Login";
import AppContext from "./AppContext";

export default () => {
  const { machine, error } = useContext(AppContext);
  console.log("executing App component...");

  return (
    <div className="w5">
    teste
      <div className="mb2">{error}</div>
      {machine.state.matches("loggedIn") ? (
        <Dashboard />
      ) : (
        <Login />
      )}
    </div>
  );
};

AppContext.js

import React, { useState } from "react";
import { useMachine } from "use-machine";
import { assign } from "xstate/lib/actions";
import machineConfig from "./machine";

const AppContext = React.createContext({
  machine: {},
  authState: "login",
  logout: () => {},
  user: {}
});

export const AppProvider = props => {
  console.log("executing AppProvider...")
  
  const machine = useMachine(machineConfig, {
    actions: {
      sideEffect: () => console.log("sideEffect"),
      setUser: (_ctx, evt) => setUser({ username: evt.username }),
      unsetUser: (_ctx, evt) => setUser({})
    }
  });
  const [user, setUser] = useState({});
  const [error, /*setError*/] = useState(undefined);

  // passed into the childs
  const logout = e => {
    e.preventDefault();
    machine.send({ type: "LOGOUT" });
  };

  return (
    <AppContext.Provider value={{ machine, user, logout, error }}>
      {props.children}
    </AppContext.Provider>
  );
};

export default AppContext

Dashboard.js

import React, {useContext} from 'react'
import AppContext from './AppContext'

export default props => {
    const {user, logout} = useContext(AppContext)

    return (
        <>
            <h1>Hello user {user.username}</h1>

            <button onClick={e => logout(e)}>
                Logout
            </button>
        </>
    )
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import './index.css';
import App from "./App";
import { AppProvider } from "./AppContext";
import * as serviceWorker from "./serviceWorker";

const render = (Component) => ReactDOM.render(
  <AppProvider>
    <App />
   </AppProvider>
   , document.getElementById("root")
);

render(App)

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default
    render(NextApp)
  })
}

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Login.js

import React, { useState, useContext } from "react";
import AppContext from "./AppContext";

export default props => {
  const { machine } = useContext(AppContext);
  const [inputName, setInputName] = useState("");

  const handleInputName = event => {
    setInputName(event.target.value);
  };

  const login = event => {
    event.preventDefault();
    machine.send("SUBMIT");
    setTimeout(
      () =>
        inputName
          ? machine.send({ type: "SUCCESS", username: inputName })
          : machine.send({
              type: "FAIL",
              error: "Uh oh, you must enter your name!"
            }),
      2000
    );
  };

  return (
      <form onSubmit={e => login(e)}>
        <label htmlFor="inputName">
          <span>Your name:</span>
          <input
            id="inputName"
            name="inputName"
            type="text"
            value={inputName}
            onChange={handleInputName}
          />
        </label>
        <input
          type="submit"
          value={machine.state.matches("loading") ? "Logging in..." : "Login"}
          disabled={machine.state.matches("loading") ? true : false}
        />
      </form>
    </>
  );
};

machineConf.js

export default {
  initial: "loggedOut",
  /*context: {
    user: {}
  },*/
  states: {
    loggedOut: {
      on: {
        SUBMIT: "loading",
      }
    },
    loading: {
      on: {
        SUCCESS: "loggedIn",
        FAIL: "loggedOut"
      }
    },
    loggedIn: {
      onEntry: ["setUser"],
      onExit: ["unsetUser"],
      on: {
        LOGOUT: "loggedOut"
      }
    }
  }
};