Check if a state transition is possible with a hook

[VanTanev]

Edit: This is now available as part of https://github.com/VanTanev/xstate-helpers

I wrote a piece of code that I think might be useful to someone, and wanted to share it:

Often times we might have a guarded transition, or only some states respond to a particular event.
This hook allows us to see if sending a given event to a machine will result in a state transition or not.

import { useCallback } from 'react'
import { Interpreter, EventObject } from 'xstate'
import { useSelector } from '@xstate/react'

export const useIsXStateTransitionAvailable = <
    TEventType extends TEvent['type'],
    TEvent extends EventObject = EventObject
>(
    service: Interpreter<any, any, TEvent, any>,
    event: TEventType | TEvent,
): boolean => {
    return useSelector(
        service,
        useCallback(
            (state: typeof service.state) => !!service.machine.transition(state, event).changed,
            [service, event],
        ),
    )
}

Used like this:

const [state, send, service] = useMachine(...)

// you can use the event type directly
const canGoToNext = useIsXStateTransitionAvailable(service, 'GO_TO_NEXT')
// or the full event
const canGoToNext = useIsXStateTransitionAvailable(service, { type: 'GO_TO_NEXT', someEventData: 1 })