\n\nuse-machine-ts is a tiny hook for designing state machines in React. It follows the familiar idiomatic React patterns, making it easy to manage state transitions.\n\n\nBundle Size\n\n```typescript\n// 973 B\nimport { useMachine } from \"use-machine-ts\"\n\n// 1.37 KB\nimport * from \"use-machine-ts\"\n\n// 1 KB\nimport * from \"use-machine-ts/standard\"\n\n// 1.04 KB\nimport * from \"use-machine-ts/shared\"\n\n// 1.08 KB\nimport * from \"use-machine-ts/synced\"\n\n// 11.12 KB\nimport { createMachine } from \"xstate@5.9.1\"\nimport { useMachine } from \"@xstate/react@4.1.0\"\n```\n\n\n## Respect\n\nuse-machine-ts is inspired by [@cassiozen/usestatemachine](https://github.com/cassiozen/useStateMachine).\n\n\nDifference between use-machine-ts and @cassiozen/usestatemachine\n\n- The state machine definition is split into one or two parts.\n The separated items are debug-related settings and the actual implementations of guard and effect functions.\n Since the implementation is not included within the state transition definitions, you get the following benefits:\n - You can focus on deliberating state transitions.\n - The logs when state transitions are guarded become clear, making debugging easier.\n (See: [Using Guards](#using-guards))\n- The special function `t` for defining context and event types is no longer needed.\n Instead, you can define schema types using `{} as `.\n- You can create state machines in advance.\n- Asynchronous state updates for state machines have become relatively safer.\n Specifically, behavior has improved when the component is already unmounted.\n (See: [Async Orchestration](#async-orchestration))\n- Besides `useMachine`, two additional convenient hooks are provided:\n - `useSharedMachine`:\n Allows sharing state between multiple React components.\n You can also manage state transitions from outside React components.\n - `useSyncedMachine`:\n Re-rendering is not triggered when the state transitions.\n This hook provides a function that returns a snapshot of the state rather than the current state.\n- 😢 The required version of React has been raised from 16.8 to 18.\n- 😢 The bundle size has increased. Compared to `useMachine`, there's an increase of about 400 bytes (+60%).\n\n\n## Basic Features\n\n- `useMachine`:\n Essentially a wrapper around `useState` and `useEffect`.\n Manages state transitions in the same way as `useState`.\n- `useSharedMachine`:\n Essentially a wrapper around `useSyncExternalStore` and `useEffect`.\n Allows sharing state between multiple React components.\n You can also manage state transitions from outside React components.\n- `useSyncedMachine`:\n Similar to `useMachine`, but re-rendering is not triggered every time the state transitions.\n This hook provides a function that returns a snapshot of the state rather than the current state.\n- `createMachine`:\n Creates a state machine. Useful for reusing state machine definitions across different components.\n Can be used with `useMachine` and `useSyncedMachine`.\n- `createSharedMachine`:\n Similar to `createMachine`, but can only be used with `useSharedMachine`.\n\n## Installation\n\nTo install the latest stable version:\n\n```sh\nnpm install use-machine-ts\n```\n\n## Sample Usage\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"inactive\",\n states: {\n inactive: {\n on: {\n TOGGLE: {\n target: \"active\",\n guard: \"isReady\",\n },\n },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n effect: \"onActive\",\n },\n },\n },\n {\n guards: {\n isReady: () => true,\n },\n effects: {\n onActive: () => {\n console.log(\"Now in the 'active' state!\")\n\n return () => {\n console.log(\"Now in the 'inactive' state!\")\n }\n },\n },\n },\n)\n\nconsole.log(state)\n// { value: \"inactive\", context: undefined,\n// event: { type: \"$init\" }, nextEvents: [\"TOGGLE\"] }\n\nsend(\"TOGGLE\")\n// Logs: Now in the 'active' state!\n\nconsole.log(state)\n// { value: \"active\", context: undefined,\n// event: { type: \"TOGGLE\" }, nextEvents: [\"TOGGLE\"] }\n```\n\n## Contents\n\n- [API](#api)\n - [useMachine](#usemachine)\n - [state](#state)\n - [send](#send)\n - [State Machine Definition](#state-machine-definition)\n - [Defining States](#defining-states)\n - [Using Guards](#using-guards)\n - [Using Effects](#using-effects)\n - [Extended State](#extended-state)\n - [Schema](#Schema)\n - [Logging](#logging)\n - [useSharedMachine](#usesharedmachine)\n - [useSyncedMachine](#usesyncedmachine)\n- [Async Orchestration](#async-orchestration)\n - [useMachine](#usemachine-1)\n - [useSharedMachine](#usesharedmachine-1)\n - [useSyncedMachine](#usesyncedmachine-1)\n\n# API\n\n[API Reference](https://tai-kun.github.io/use-machine-ts/)\n\n## useMachine\n\n[API Reference](https://tai-kun.github.io/use-machine-ts/functions/useMachine.html)\n\nTo create an ad-hoc state machine:\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n /* State Machine Definition */,\n /* State Machine Configuration (Optional) */,\n)\n```\n\nTo use a pre-built state machine:\n\n```typescript\nimport { useMachine, createMachine } from \"use-machine-ts\"\n\nconst machine = /* @__PURE__ */ createMachine(\n /* State Machine Definition */,\n /* State Machine Configuration (Optional) */,\n)\n\nconst [state, send] = useMachine(machine)\n```\n\nOr use the constructor:\n\n```typescript\nimport { useMachine, createMachine } from \"use-machine-ts\"\n\nfunction machine() {\n return createMachine(\n /* State Machine Definition */,\n /* State Machine Configuration (Optional) */,\n )\n}\n\nconst [state, send] = useMachine(machine)\n```\n\n### state\n\n`state` consists of four properties: `value`, `event`, `nextEvents`, and `context`.\n\n| Property | Type | Description |\n| :-- | :-- | :-- |\n| `value` | `string` | The current state, such as `\"inactive\"` or `\"active\"`. |\n| `event` | `object` | The last event that was sent, causing the current state. For example, `{ type: \"TOGGLE\" }`. Initially, it is `{ type: \"$init\" }`. |\n| `nextEvents` | `string[]` | A list of events that can be sent in the current state, such as `[\"TOGGLE\"]`. |\n| `context` | `any` | The extended state of the state machine. See [Extended State](#extended-state). |\n\n### send\n\nThe `send` function is used to send events to the state machine. It takes a single argument, which can be a string representing the event type (e.g., `\"TOGGLE\"`) or an object (e.g., `{ type: \"TOGGLE\" }`).\n\nIf the current state accepts the event and a transition is possible (see [Guards](#using-guards)), the state machine's state will be updated, and any associated effects will be executed (see [Effects](#using-effects)).\n\nYou can send additional data using the object format for events (e.g., `{ type: \"TOGGLE\", value: 10 }`). For information on defining event types, see [Schema](#schema).\n\n### State Machine Definition\n\n| Property | Type | Required | Description |\n| :-- | :-- | :-- | :-- |\n| `initial` | `string` | ✅ | Defines the initial state of the state machine. |\n| `states` | `object` | ✅ | Defines the finite states the state machine can be in. (See: [Defining States](#defining-states)) |\n| `on` | `object` | | Defines transitions for events not accepted in the current state. (See: [Defining States](#defining-states)) |\n| `context` | `any` | | Defines the extended state of the state machine. (See: [Extended State](#extended-state)) |\n| `$schema` | `object` | | Defines the schema of the state machine by type. (See: [Schema](#schema)) |\n\n### State Machine Configuration\n\n| Property | Type | Description |\n| :-- | :-- | :-- |\n| `guards` | `object` | Defines guard functions for the state machine. (See: [Using Guards](#using-guards)) |\n| `effects` | `object` | Defines effect functions for the state machine. (See: [Using Effects](#using-effects)) |\n| `verbose` | `boolean` `0` `1` `2` | Enables debug logging. (See: [Logging](#logging)) |\n| `console` | `object` | Defines a custom console for logging output. (See: [Logging](#logging)) |\n\n### Defining States\n\nA state machine can only be in one of a finite number of states at any given time. Additionally, states can only change in response to events.\n\nStates are defined as keys in the `states` object, and event types are defined as keys in the `on` object within each state.\n\n```typescript\n{\n states: {\n // state name: state object\n inactive: {\n on: { // event definition\n TOGGLE: \"active\", // Event type: Destination state value\n },\n },\n active: {\n on: {\n TOGGLE: \"inactive\",\n },\n },\n },\n}\n```\n\nIn event definitions, you can use objects with a `target` property to control state transitions in more detail (such as adding guards).\n\n```typescript\n{\n on: {\n TOGGLE: {\n target: \"active\",\n guard: \"isReady\",\n },\n },\n}\n```\n\n### Using Guards\n\nGuards are functions that execute before a state transition occurs. If a guard returns `true`, the state transition is allowed. If a guard returns `false`, the state transition is denied.\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"inactive\",\n states: {\n inactive: {\n on: {\n TOGGLE: {\n target: \"active\",\n guard: \"isReady\",\n },\n },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n },\n },\n },\n {\n guards: {\n isReady: () => true,\n },\n },\n)\n```\n\nuse-machine-ts provides three helper functions: `and`, `or`, and `not`. You can use these functions to create complex guards.\n\n```typescript\nimport { and, not, or, useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"inactive\",\n states: {\n inactive: {\n on: {\n TOGGLE: {\n target: \"active\",\n guard: and(or(\"isReady\", \"isStopped\"), not(\"isDestroyed\")),\n },\n },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n },\n },\n },\n {\n guards: {\n isReady: () => true,\n isStopped: () => true,\n isDestroyed: () => true,\n },\n },\n)\n```\n\nThe `and` function can be replaced with a simple array.\n\n```typescript\nand(or(\"isReady\", \"isStopped\"), not(\"isDestroyed\"))\n// equals\n[or(\"isReady\", \"isStopped\"), not(\"isDestroyed\")]\n```\n\nIf a guard ultimately returns `false`, the following log will be output:\n\n```console\nTransition from 'inactive' to 'active' denied by guard.\n((isReady || isStopped) && !isDestroyed)\n ^^^^^^^^^^^^ \nEvent { type: \"TOGGLE\" }\nContext undefined\n```\n\nThe `^` indicates the guard that caused the state transition to be denied. In the example above, `isDestroyed` returning `true` caused the state transition to be denied.\n\n> [!IMPORTANT] \n> `and` without any guards always returns `true`.\n> `or` without any guards always returns `false`.\n\n### Using Effects\n\nEffects are functions that execute when the state machine enters a specific state. If the effect returns a function, that function is executed when leaving that state. This behavior is similar to the `useEffect` hook in React.\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"active\",\n states: {\n active: {\n on: { TOGGLE: \"inactive\" },\n effect: \"onActive\",\n },\n },\n },\n {\n effects: {\n onActive: entryParams => {\n console.log(\"Entered 'active' state!\")\n\n return exitParams => {\n console.log(\"Left from 'active' state!\")\n }\n },\n },\n },\n)\n```\n\nThe `effect` property can accept an array instead of a string.\n\n```typescript\n{\n effect: [\n \"onActive\",\n \"onTransition\",\n ],\n}\n```\n\nEffect functions receive an object (`entryParams`) with the following four properties as a parameter:\n\n| Property | Type | Description |\n| :-- | :-- | :-- |\n| `event` | `object` | The event that triggered the transition to the current state. The event is always in object format (e.g., `{ type: \"TOGGLE\" }`). |\n| `context` | `any` | The extended state of the state machine. |\n| `send` | `function` | A function to send events to the state machine. |\n| `setContext` | `function` | A function to update the extended state of the state machine. It returns an object with the `send` property, allowing you to update the `context` and transition states in one line. |\n| `isMounted` | `function` | A function to check if the component is mounted. |\n\nThe function returned by the effect function receives an object (`exitParams`) with the following four properties as a parameter:\n\n| Property | Type | Description |\n| :-- | :-- | :-- |\n| `event` | `object` | The event that triggered the transition from the current state. The event is always in object format (e.g., `{ type: \"TOGGLE\" }`). |\n| `context` | `any` | The extended state of the state machine. |\n| `send` | `function` | A function to send events to the state machine. |\n| `setContext` | `function` | A function to update the extended state of the state machine. It returns an object with the `send` property, allowing you to update the `context` and transition states in one line. |\n| `isMounted` | `function` | A function to check if the component is mounted. |\n\nIn the following example, the `retryCount` is updated every time the state changes to `failure`, and if the limit is reached, it transitions to an error state.\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"loading\",\n context: { retryCount: 0 },\n states: {\n loading: {\n on: {\n FAILURE: \"failure\",\n DONE: \"done\",\n },\n },\n failure: {\n on: {\n RETRY: \"loading\",\n ERROR: \"error\",\n },\n effect: \"onFailure\",\n },\n error: {\n on: {\n RETRY: \"loading\",\n },\n effect: [\n \"onError\",\n \"resetRetryCount\",\n ],\n },\n done: {},\n },\n },\n {\n effects: {\n onFailure: ({ context, send, setContext }) => {\n if (context.retryCount < 3) {\n setContext(ctx => ({ retryCount: ctx.retryCount + 1 })).send(\"RETRY\")\n } else {\n send(\"ERROR\")\n }\n\n return ({ event }) => {\n if (event.type === \"RETRY\") {\n console.log(\"Retrying...\")\n } else {\n console.log(\"The number of retries has reached the upper limit!\")\n }\n }\n },\n onError: () => {\n console.log(\"Error state entered!\")\n },\n resetRetryCount: ({ setContext }) => {\n setContext(() => ({ retryCount: 0 }))\n },\n },\n },\n)\n```\n\n> [!WARNING]\n> The state machine's definition and configuration cannot be changed midway. Functions defined in `effects` and `guards` will continue to reference the values they had when initially defined. Therefore, caution is needed when directly observing state changes.\n\nHere is an example of how to use the React `useEffect` hook to update the component's state when the state machine's state changes. This works correctly.\n\n```typescript\nfunction Component(props: { onActive: () => void }) {\n const { onActive } = props\n const [state, send] = useMachine(\n /* State Machine Definition */,\n {\n effects: {\n onActive: () => {\n },\n },\n },\n )\n\n useEffect(() => {\n if (state.value === \"active\") {\n onActive()\n }\n }, [state])\n}\n```\n\nYou might find the above example redundant and be tempted to write code like this. However, this could lead to bugs.\n\n```typescript\nfunction Component(props: { onToggle: (isActive: boolean) => void }) {\n const { onToggle } = props\n const [state, send] = useMachine(\n /* State Machine Definition */,\n {\n effects: {\n onActive: () => {\n // If props.onToggle is changed, the change will not be reflected.\n // Always refers to the first defined value, which can lead to serious bugs.\n onToggle()\n },\n },\n },\n )\n}\n```\n\nUsing `useRef` to always reference the latest function can avoid this issue.\n\n```typescript\nfunction Component(props: { onToggle: (isActive: boolean) => void }) {\n const onToggle = React.useRef(props.onToggle)\n onToggle.current = props.onToggle\n const [state, send] = useMachine(\n /* State Machine Definition */,\n {\n effects: {\n onActive: () => {\n onToggle.current(true)\n },\n },\n },\n )\n}\n```\n\nHowever, the potential for human error still exists. Practically, it is recommended to use the constructor to transfer values dependent on React components.\n\n```typescript\nimport { createMachine } from \"use-machine-ts\"\n\nfunction machine(\n props: () => {\n initial: \"inactive\" | \"active\"\n onToggle: ((isActive: boolean) => void) | undefined\n }\n) {\n return createMachine(\n {\n initial: props().initial,\n states: {\n inactive: {\n on: { TOGGLE: \"active\" },\n effect: \"onInactive\",\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n effect: \"onActive\",\n },\n },\n },\n {\n effects: {\n onActive: ({ context }) => {\n const { onToggle } = props()\n onToggle?.(true)\n },\n onInactive: ({ context }) => {\n const { onToggle } = props()\n onToggle?.(false)\n },\n },\n },\n )\n}\n\nfunction ToggleButton(props: { onToggle?: (isActive: boolean) => void }) {\n const [state, send] = useMachine(machine, {\n initial: \"inactive\",\n onToggle: props.onToggle,\n })\n}\n```\n\nA pre-defined machine in function form can accept a single argument. This argument must be a function. This function is a thin wrapper around `useRef` and always returns the latest value.\n\n### Extended State\n\nIn addition to a finite number of states, a state machine can have extended states (known as context). The `context` property is used to define the initial extended state, and the `setContext` function is used to update the extended state.\n\n```typescript\nconst [state, send] = useMachine(\n {\n initial: \"inactive\",\n context: { toggleCount: 0 },\n states: {\n inactive: {\n on: { TOGGLE: \"active\" },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n effect: \"onActive\",\n },\n },\n },\n {\n effects: {\n onActive: ({ setContext }) => {\n setContext(ctx => ({ toggleCount: ctx.toggleCount + 1 }))\n },\n },\n },\n)\n\nconsole.log(state.context) // { toggleCount: 0 }\n\nsend(\"TOGGLE\")\n\nconsole.log(state.context) // { toggleCount: 1 }\n```\n\n### Schema\n\nTypeScript automatically infers the types of context and events, but you can also explicitly define the state machine schema using the `$schema` property. This object is not used by the runtime.\n\nThe `$schema` property has three properties: `context`, `events`, and `strict`.\n\n| Property | Type | Required | Description |\n| :-- | :-- | :-- | :-- |\n| `context` | `any` | Defines the type of the state machine's extended state. |\n| `events` | `object` | Defines the type of the state machine's events. |\n| `strict` | `boolean` | Enables strict mode for the schema. When set to `true`, automatic inference is disabled, and any context and events not defined in the schema will cause a type error. |\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n $schema: {} as {\n context: {\n toggleCount: number\n }\n events: {\n TOGGLE: {\n timestamp: Date\n }\n }\n },\n context: { toggleCount: 0 },\n initial: \"inactive\",\n states: {\n inactive: {\n on: { TOGGLE: \"active\" },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n effect: \"onActive\",\n },\n },\n },\n {\n effects: {\n onActive: ({ event, setContext }) => {\n console.log(event)\n setContext(ctx => ({ toggleCount: ctx.toggleCount + 1 }))\n },\n },\n },\n)\n\nsend(\"TOGGLE\") // Type Error !\n\nsend({ type: \"TOGGLE\", timestamp: new Date() }) // OK (^_^)b\n\n// Logs: { type: \"TOGGLE\", timestamp: 2024-01-01T00:00:00.000Z }\n```\n\n### Logging\n\nYou can enable logging for your state machine if needed. Use the `verbose` property to set the logging level.\n\n| Value | Description |\n| :-- | :-- |\n| `0` or `false` | Disables logging. |\n| `1` | Logs onlyerrors. (Default) |\n| `2` or `true` | Logs errors and debug information. |\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"inactive\",\n states: {\n inactive: {\n on: { TOGGLE: \"active\" },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n },\n },\n },\n {\n verbose: 2,\n },\n)\n```\n\n> [!NOTE]\n> Logging is disabled if `process.env.NODE_ENV` is `\"production\"`.\n\n## useSharedMachine\n\n[API Reference](https://tai-kun.github.io/use-machine-ts/functions/useSharedMachine.html)\n\nTo use `useSharedMachine`, you must use a state machine created with `createSharedMachine`.\n\n```typescript\nimport { useSharedMachine, createSharedMachine } from \"use-machine-ts\"\n\nconst sharedMachine = createSharedMachine(\n /* State Machine Definition */,\n /* State Machine Configuration (Optional) */,\n)\n\nconst [state, send] = useSharedMachine(sharedMachine)\n```\n\n`useSharedMachine` works similarly to `useMachine`, but it allows you to manage state transitions from outside. It is essentially a wrapper around `useSyncExternalState` and `useEffect`. It can be likened to the relationship between `atom` and `useAtom`.\n\n```typescript\nconst machineAtom = atom() /* Initial State */\nconst [state, setState] = useAtom(machineAtom)\n\nconst send = event => {\n const nextState = eventToNextState(event, state)\n setState(nextState)\n}\n```\n\nA shared state machine is an object with six properties: `instance`, `dispatch`, `send`, `setContext`, `getState`, and `subscribe`.\n\n| Properties | Type | Description |\n| :-- | :-- | :-- |\n| `instance` | `[Definition, Configuration?]` | The state machine instance. |\n| `dispatch` | `function` | A function to send events to the state machine. It is the primitive function used by send and setContext. |\n| `send` | `function` | A function to send events to the state machine. |\n| `setContext` | `function` | A function to update the state machine's extended state. |\n| `getState` | `function` | A function to get the current state of the state machine. |\n| `subscribe` | `function` | A function to watch for state changes in the state machine. |\n\n## useSyncedMachine\n\n[API Reference](https://tai-kun.github.io/use-machine-ts/functions/useSyncedMachine.html)\n\nUnlike `useMachine`, it does not trigger re-rendering every time the state transitions. This hook provides a function that returns a snapshot of the state, not the current state.\n\n```typescript\nimport { useSyncedMachine } from \"use-machine-ts\"\n\nconst [getState, send] = useSyncedMachine({\n initial: \"inactive\",\n states: {\n inactive: {\n on: { TOGGLE: \"active\" },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n },\n },\n})\n\nconsole.log(getState())\n// { value: \"inactive\", context: undefined,\n// event: { type: \"$init\" }, nextEvents: [\"TOGGLE\"] }\n\nsend(\"TOGGLE\")\n\nconsole.log(getState())\n// { value: \"active\", context: undefined,\n// event: { type: \"TOGGLE\" }, nextEvents: [\"TOGGLE\"] }\n```\n\n# Async Orchestration\n\n> [!WARNING]\n> Whenever possible, avoid updating state asynchronously in use-machine-ts.\n\nWhen updating state asynchronously, several considerations arise depending on the specific hook used: `useMachine`, `useSharedMachine`, or `useSyncedMachine`.\n\n## useMachine\n\nWithin `useMachine`, you can call the `send` and `setContext` functions asynchronously as long as the component remains mounted. However, if the component has already been unmounted, these functions will instead display an error message indicating that the state cannot be updated:\n\n```console\nCannot dispatch an action to the state machine after the component is unmounted.\nAction { type: \"SEND\", payload: { type: \"TOGGLE\" } }\n```\n\nFor `setContext`, the `type` property value will be `\"SET_CONTEXT\"`.\n\nTo check if the component is unmounted beforehand, you can utilize the `isMounted` property within the parameter passed to the `effect` function. The `isMounted` function returns `true` if the component is mounted, and `false` otherwise.\n\n```typescript\nimport { useMachine } from \"use-machine-ts\"\n\nconst [state, send] = useMachine(\n {\n initial: \"inactive\",\n states: {\n inactive: {\n on: { TOGGLE: \"active\" },\n },\n active: {\n on: { TOGGLE: \"inactive\" },\n },\n },\n },\n {\n effects: {\n onActive: ({ send, isMounted }) => {\n setTimeout(() => {\n if (isMounted()) {\n send(\"TOGGLE\")\n }\n }, 1000)\n },\n },\n },\n)\n```\n\n## useSharedMachine\n\nIn `useSharedMachine`, you can call `send`, `setContext`, or the shared machine's `dispatch` asynchronously regardless of the component's mount state. No error or warning messages will be displayed. To check if the component is unmounted beforehand, you can use the `isMounted` function similarly to `useMachine`.\n\n## useSyncedMachine\n\nWithin `useSyncedMachine`, you cannot call the `send` and `setContext` functions asynchronously regardless of the component's mount state. These functions are unlocked at the beginning of an effect and locked after its completion. Calling these functions while locked will result in an error message:\n\n```console\nSend function not available. Must be used synchronously within an effect.\nState { value: \"inactive\", event: { type: \"$init\" }, nextEvents: [\"TOGGLE\"], context: undefined }\nEvent: { type: \"TOGGLE\" }\n```\n","readmeFilename":"README.md"}