Can you add skip in the react hook?

[veeramarni]

Like the below code, so the usemachine get skipped until the dependent state is loaded.

import { useCallback, useEffect, useState } from 'react';
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
import {
    AnyStateMachine,
    AreAllImplementationsAssumedToBeProvided,
    EventObject,
    InternalMachineOptions,
    InterpreterFrom,
    InterpreterOptions,
    InterpreterStatus,
    State,
    StateConfig,
    StateFrom,
    AnyInterpreter,
    AnyState,
} from 'xstate';
import { useIdleInterpreter } from './use-interpreter';

export type MaybeLazy<T> = T | (() => T);

export type NoInfer<T> = [T][T extends any ? 0 : any];

export type Prop<T, K> = K extends keyof T ? T[K] : never;

export interface UseMachineOptions<TContext, TEvent extends EventObject> {
    /**
     * If provided, will be merged with machine's `context`.
     */
    context?: Partial<TContext>;
    /**
     * The state to rehydrate the machine to. The machine will
     * start at this state instead of its `initialState`.
     */
    state?: StateConfig<TContext, TEvent>;
}

export interface UseMachineOptions<TContext, TEvent extends EventObject> {
    /**
     * If provided, will be merged with machine's `context`.
     */
    context?: Partial<TContext>;
    /**
     * The state to rehydrate the machine to. The machine will
     * start at this state instead of its `initialState`.
     */
    state?: StateConfig<TContext, TEvent>;
}

type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<
    TMachine['__TResolvedTypesMeta']
> extends false
    ? [
        options: InterpreterOptions &
        UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> &
        InternalMachineOptions<
            TMachine['__TContext'],
            TMachine['__TEvent'],
            TMachine['__TResolvedTypesMeta'],
            true
        > & { skip?: boolean },
    ]
    : [
        options?: InterpreterOptions &
        UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> &
        InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']> & {
            skip?: boolean;
        },
    ];

type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [
    StateFrom<TMachine>,
    Prop<TInterpreter, 'send'>,
    TInterpreter,
];

function identity<T>(a: T): T {
    return a;
}

function isInterpreterStateEqual(
    service: AnyInterpreter & { isRehydrated: boolean },
    prevState: AnyState,
    nextState: AnyState,
) {
    if (service.status === InterpreterStatus.NotStarted) {
        return true;
    }

    // Deliberately returning false when rehydration took place so that the rehydrated state can be displayed
    if (service.isRehydrated) {
        return false;
    }

    // Only change the current state if:
    // - the incoming state is the "live" initial state (since it might have new actors)
    // - OR the incoming state actually changed.
    //
    // The "live" initial state will have .changed === undefined.
    const initialStateChanged =
        nextState.changed === undefined &&
        (Object.keys(nextState.children).length > 0 || typeof prevState.changed === 'boolean');

    return !(nextState.changed || initialStateChanged);
}

export function useMachineAdvance<TMachine extends AnyStateMachine>(
    getMachine: MaybeLazy<TMachine>,
    ...[options = {}]: RestParams<TMachine>
): UseMachineReturn<TMachine> {
    // using `useIdleInterpreter` allows us to subscribe to the service *before* we start it
    // so we don't miss any notifications
    const service = useIdleInterpreter(getMachine, options as any);

    const getSnapshot = () => {
        if (service.status === InterpreterStatus.NotStarted) {
            return service.machine.initialState;
        }

        const state = service.getSnapshot();
        return state;
    };

    const isEqual = useCallback(
        (prevState, nextState) => {
            const result = isInterpreterStateEqual(service, prevState, nextState);
            if (service.isRehydrated) {
                service.isRehydrated = false;
            }
            return result;
        },
        [service],
    );

    const subscribe = useCallback(
        (handleStoreChange) => {
            const { unsubscribe } = service.subscribe(handleStoreChange);
            return unsubscribe;
        },
        [service],
    );
    const storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);

    useEffect(() => {
        const rehydratedState = options.state;

        if (!options.skip) {
            service.start(rehydratedState ? (State.create(rehydratedState) as any) : undefined);

            if (rehydratedState) {
                service.isRehydrated = true;
            }
        }

        return () => {
            if (service.status === InterpreterStatus.Running) {
                service.stop();
            }
            service.status = InterpreterStatus.NotStarted;
        };
    }, [options.skip]);

    return [storeSnapshot, service.send, service] as any;
}

[Andarist]

I feel like this is going against the recommended React patterns. You can usually restructure your component tree to solve issues like this. You could even wrap this machine in another one, the outer one could act as a shell that is merely waiting for the inner one to load its data - nothing would have to be "skipped" in such a setup.