Destroy/Clean up a machine stopped in an arbitrary moment (eg, React DOM unmount)

[VanTanev]

I have a machine that can enter a state that invokes a service which needs to be cleaned up, and I'm having a hard time modelling it.

Outside XState, the service works like this:

const tabLock= new TabLock()

// acquire a lock:
tabLock.acquire() // returns a Promise<void> that fulfills on success and rejects on failure

// release a lock
tabLock.release() // synchronously releases the lock

// destroy all resources (eg BroadcastChannel)
tabLock.destroy()

// in react:
function useTabLock() {
  const [tabLock] = React.useState(() => new TabLock())
  React.useEffect(() => {
    // cleanup tabLock
    () => tabLock.destroy()
  }, [tabLock]
  return tabLock
}

In XState, I initially did this:

const machineCreator = () => createMachine({
  context: {
    tabLock: new TabLock()
  },
  initial: 'idle',
  states: {
    idle: {
      on: { ACQUIRE: 'acquiring' }
      on: { DESTROY: 'destroy' }
    },
    acquiring: {
      invoke: {
        src: async (ctx) => {
          await ctx.tabLock.aquire() // first acquires a browser-level lock
          await acquireNetworkLock(ctx) // acquires network-level lock
        },
        onDone: 'locked',
        onError: 'idle'
      }
    },
    locked: {
      on: { RELEASE: 'releasing', }
    },
    releasing: {
      invoke: {
        src: async (ctx) => {
            await releaseNetworkLock(ctx) // releases the network-level lock
            await ctx.tabLock.release()
          }
        },
        onDone: 'idle'
      }
    },
    destroyed: {
      type: 'final',
      entry: (ctx) => ctx.tabLock.destroy()
    }
  }
})

The above however breaks when the user navigates away without going through a "release."
The especially problematic part is tabLock.destroy() not being called, and the object just hangs around without a way to clean it up.

[VanTanev]

Edit: There is a better solution: #1825 (comment)

Original below:

---

The one solution I found was this:

const machineCreator = () => createMachine({
  context: {
    tabLock: new TabLock()
  },
  activities: ['tabLockDestroyer']
  // ...
}, {
  activities: {
    tabLockDestroyer: ctx => () => ctx.tabLock.destroy()
  }
})

It feels somewhat bludgeoning, but maybe it's the only way?

[davidkpiano]

It only seems hard because you're using async/await syntax. This is the same reason that you can't (shouldn't) use async/await in useEffect - you can't immediately return a cleanup function.

Consider something like this instead:

      invoke: {
        src: (ctx, e) => (sendBack, receive) => {
          new Promise(async () => {
            await someLock.acquire();
          });

          return () => someLock.destroy();
        }
      },

[VanTanev]

@Andarist This is the approach I was looking for, thanks!
I'll rewrite it as a separate answer and mark it as accepted.

[VanTanev]

@Andarist @davidkpiano Conceptually, shouldn't a callback invoke at the top level be destroyed only after the machine is stopped? Why does it get destroyed immediately?

[Andarist]

Is it maybe just recreated? Maybe the state in which this is declared gets reentered?

[VanTanev]

@Andarist It's immediately destroyed, even though the machine is still running: https://codesandbox.io/s/dazzling-hellman-bwqni?file=/src/index.js

This seems possibly like a bug?
Wrong!

I was doing the invoke wrong, it's tripple callback, not double, here is the proper version, it works as expected:
https://codesandbox.io/s/friendly-matsumoto-k0mc0?file=/src/index.js

It's kind of easy to get the callback invoke wrong, and TypeScript was no help here :(

[Andarist]

The next major version should be more helpful around this in terms of TypeScript. The API will change slightly so it should actually make it clearer how the callback service should be written.

[VanTanev]

@Andarist suggested the proper solution here:

const machineCreator = () => createMachine({
  context: {
    tabLock: new TabLock()
  },
  exit: (ctx) => ctx.tabLock.destroy()
})

[Andarist]

A more proper one would be to create the tabLock in the entry action or use a factory function to declare context.

createMachine creates "templates" for machines - you can think about it as about creating a class. I'm pretty sure you want to keep the lock per instance and not as a static value on the class itself.

[VanTanev]

You are, of course, correct. The actual code uses a creator function. I was overly brief in my example code, will update it as to not confuse others.