App.tsx

import { XstateInspectLoader } from 'shared/util/XstateInspectLoader'

const App = () => {
  <XstateInspectLoader>
    // rest of app goes here
  </XstateInspectLoader>
}

MachineComponent.tsx

import React from 'react'
import { isXstateInspectEnabled } from 'shared/util/XstateInspectLoader'

const Component: React.FC = (): React.ReactElement => {
    const [state, send] = useMachine(
        () => createMachine({...})
        {
            devTools: isXstateInspectEnabled,
        },
    )

    // ...
}

XStateInspectLoader.tsx

import React from 'react'
import ReactDOM from 'react-dom'

const FLAG = 'xstate-inspect-enabled'

const xstateInspect = {
    start: () => {
        sessionStorage.setItem(FLAG, '1')
        window.location.reload()
    },
    stop: () => {
        sessionStorage.removeItem(FLAG)
        window.location.reload()
    },
}

;(window as any).xstateInspect = xstateInspect

const xstateInspectEnabled = (): boolean => {
    try {
        return sessionStorage.getItem(FLAG) === '1'
    } catch {
        return false
    }
}

export const isXstateInspectEnabled = xstateInspectEnabled()

export const XstateInspectLoader: React.FC = ({ children }) => {
    const [loading, setLoading] = React.useState(isXstateInspectEnabled)
    React.useEffect(() => {
        if (isXstateInspectEnabled) {
            import('@xstate/inspect').then(({ inspect }) => {
                const wrapper = document.createElement('div')
                document.querySelector('#root')!.prepend(wrapper)
                ReactDOM.render(
                    <div style={{ height: '600px', overflow: 'hidden', overflowY: 'scroll' }}>
                        <iframe
                            title="xstate-inspector"
                            style={{ width: '100%', height: '2000px' }}
                            data-xstate
                        ></iframe>
                    </div>,
                    wrapper,
                )
                inspect()
                setLoading(false)
            })
        }
    }, [])

    return loading ? null : <>{children}</>
}

export default XstateInspectLoader