@xstate/react 7.0.0-alpha.7 → 7.0.0-beta.0

package/README.md

@@ -10,7 +10,7 @@ This package contains utilities for using [XState](https://github.com/statelyai/
 1. Install `xstate` and `@xstate/react`:
 
 ```bash
-npm i xstate @xstate/react
+npm i xstate@beta @xstate/react@beta
 ```
 
 2. Import the `useMachine` hook:

package/dist/declarations/src/createActorContext.d.ts

@@ -8,5 +8,10 @@ export declare function createActorContext<TLogic extends AnyActorLogic>(actorLo
         children: React.ReactNode;
         options?: ActorOptions<TLogic>;
         logic?: TLogic;
+        /**
+         * An already-created actor (e.g. from `restoreActor`) to provide instead
+         * of creating one from `logic` and `options`. Create it once.
+         */
+        actor?: Actor<TLogic>;
     }) => React.ReactElement<any, any>;
 };

package/dist/declarations/src/useActor.d.ts

@@ -1,5 +1,12 @@
 import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys, type RequiredActorOptionsFor } from 'xstate';
-/** @public */
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`) and subscribes to its snapshot. Create a passed actor once,
+ * e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+export declare function useActor<TLogic extends AnyActorLogic>(actor: Actor<TLogic>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];
 export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
     options?: ActorOptions<TLogic> & RequiredActorOptionsFor<TLogic>
 ], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];

package/dist/declarations/src/useActorRef.d.ts

@@ -1,9 +1,21 @@
 import { Actor, ActorOptions, AnyActorLogic, Observer, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys, type RequiredActorOptionsFor } from 'xstate';
-export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
+/**
+ * An already-created actor (e.g. from `restoreActor`). Hooks use it as is
+ * instead of creating one from logic.
+ */
+export declare function isActor(value: unknown): value is Actor<AnyActorLogic>;
+export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logicOrActor: TLogic | Actor<TLogic>, ...[options]: ConditionalRequired<[
     options?: ActorOptions<TLogic> & RequiredActorOptionsFor<TLogic>
 ], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [Actor<TLogic>, (actorRef: Actor<TLogic>) => void];
 export declare function useActorLifecycle<TLogic extends AnyActorLogic>(actorRef: Actor<TLogic>, setActorRef: (actorRef: Actor<TLogic>) => void, createReplacement: () => Actor<TLogic>): void;
-/** @public */
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`), starts it on mount and stops it on unmount. Create a passed
+ * actor once, e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+export declare function useActorRef<TLogic extends AnyActorLogic>(actor: Actor<TLogic>, observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)): Actor<TLogic>;
 export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: IsNotNever<RequiredActorOptionsKeys<TLogic>> extends true ? [
     options: ActorOptions<TLogic> & RequiredActorOptionsFor<TLogic>,
     observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)

package/dist/declarations/src/useMachine.d.ts

@@ -5,6 +5,7 @@ import { Actor, ActorOptions, AnyStateMachine, StateFrom, type ConditionalRequir
  * @deprecated Use `useActor(machine, options)`.
  * @public
  */
+export declare function useMachine<TMachine extends AnyStateMachine>(actor: Actor<TMachine>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];
 export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, ...[options]: ConditionalRequired<[
     options?: ActorOptions<TMachine> & RequiredActorOptionsFor<TMachine>
 ], IsNotNever<RequiredActorOptionsKeys<TMachine>>>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];

package/dist/xstate-react.cjs.js

@@ -35,15 +35,23 @@ function isStateMachine(logic) {
   return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
 }
 
+/**
+ * An already-created actor (e.g. from `restoreActor`). Hooks use it as is
+ * instead of creating one from logic.
+ */
+function isActor(value) {
+  return value instanceof xstate.Actor;
+}
+
 // The hook updates the sources of its machine on later renders. A per-hook
 // copy keeps those updates from reaching the caller's machine, which may be
 // shared by other actors.
 function ownLogic(logic) {
   return isStateMachine(logic) ? logic.provide({}) : logic;
 }
-function useIdleActorRef(logic, ...[options]) {
+function useIdleActorRef(logicOrActor, ...[options]) {
   const [actorRef, setActorRef] = React.useState(() => {
-    return xstate.createActor(ownLogic(logic), options);
+    return isActor(logicOrActor) ? logicOrActor : xstate.createActor(ownLogic(logicOrActor), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -57,6 +65,11 @@ function useIdleActorRef(logic, ...[options]) {
   // `machine.provide()` for the same machine config.
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
+    // A ready actor is owned as is; its logic is not updated by later renders.
+    if (isActor(logicOrActor)) {
+      return;
+    }
+    const logic = logicOrActor;
     const currentLogic = actorRef.logic;
     refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
@@ -104,9 +117,19 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
   }, [actorRef]);
 }
 
-/** @public */
-function useActorRef(machine, ...[options, observerOrListener]) {
-  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`), starts it on mount and stops it on unmount. Create a passed
+ * actor once, e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActorRef(logicOrActor, ...args) {
+  const readyActor = isActor(logicOrActor);
+  const options = readyActor ? undefined : args[0];
+  const observerOrListener = readyActor ? args[0] : args[1];
+  const [actorRef, setActorRef] = useIdleActorRef(logicOrActor, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -156,9 +179,10 @@ function createActorContext(actorLogic, actorOptions) {
   function Provider({
     children,
     logic: providedLogic = actorLogic,
-    options: providedOptions
+    options: providedOptions,
+    actor: providedActor
   }) {
-    const actor = useActorRef(providedLogic, {
+    const actor = useActorRef(providedActor ?? providedLogic, providedActor ? undefined : {
       ...actorOptions,
       ...providedOptions
     });
@@ -214,9 +238,17 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-/** @public */
-function useActor(logic, ...[options]) {
-  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`) and subscribes to its snapshot. Create a passed actor once,
+ * e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActor(logic, options) {
+  const readyActor = isActor(logic);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, ...[options]);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -234,7 +266,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(actorRef.logic, options));
+  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(actorRef.logic, readyActor ? actorRef.options : options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
@@ -244,7 +276,8 @@ function useActor(logic, ...[options]) {
  * @deprecated Use `useActor(machine, options)`.
  * @public
  */
-function useMachine(machine, ...[options]) {
+
+function useMachine(machine, options) {
   return useActor(machine, options);
 }
 

package/dist/xstate-react.development.cjs.js

@@ -35,15 +35,23 @@ function isStateMachine(logic) {
   return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
 }
 
+/**
+ * An already-created actor (e.g. from `restoreActor`). Hooks use it as is
+ * instead of creating one from logic.
+ */
+function isActor(value) {
+  return value instanceof xstate.Actor;
+}
+
 // The hook updates the sources of its machine on later renders. A per-hook
 // copy keeps those updates from reaching the caller's machine, which may be
 // shared by other actors.
 function ownLogic(logic) {
   return isStateMachine(logic) ? logic.provide({}) : logic;
 }
-function useIdleActorRef(logic, ...[options]) {
+function useIdleActorRef(logicOrActor, ...[options]) {
   const [actorRef, setActorRef] = React.useState(() => {
-    return xstate.createActor(ownLogic(logic), options);
+    return isActor(logicOrActor) ? logicOrActor : xstate.createActor(ownLogic(logicOrActor), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -57,6 +65,11 @@ function useIdleActorRef(logic, ...[options]) {
   // `machine.provide()` for the same machine config.
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
+    // A ready actor is owned as is; its logic is not updated by later renders.
+    if (isActor(logicOrActor)) {
+      return;
+    }
+    const logic = logicOrActor;
     const currentLogic = actorRef.logic;
     const refreshed = refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
@@ -114,9 +127,19 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
   }, [actorRef]);
 }
 
-/** @public */
-function useActorRef(machine, ...[options, observerOrListener]) {
-  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`), starts it on mount and stops it on unmount. Create a passed
+ * actor once, e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActorRef(logicOrActor, ...args) {
+  const readyActor = isActor(logicOrActor);
+  const options = readyActor ? undefined : args[0];
+  const observerOrListener = readyActor ? args[0] : args[1];
+  const [actorRef, setActorRef] = useIdleActorRef(logicOrActor, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -166,9 +189,10 @@ function createActorContext(actorLogic, actorOptions) {
   function Provider({
     children,
     logic: providedLogic = actorLogic,
-    options: providedOptions
+    options: providedOptions,
+    actor: providedActor
   }) {
-    const actor = useActorRef(providedLogic, {
+    const actor = useActorRef(providedActor ?? providedLogic, providedActor ? undefined : {
       ...actorOptions,
       ...providedOptions
     });
@@ -224,12 +248,20 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-/** @public */
-function useActor(logic, ...[options]) {
-  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
-    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`) and subscribes to its snapshot. Create a passed actor once,
+ * e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActor(logic, options) {
+  const readyActor = isActor(logic);
+  if (!readyActor && !!logic && 'send' in logic && typeof logic.send === 'function') {
+    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Pass an Actor created with createActor()/restoreActor(), or use the useSelector(actorRef, ...) hook to read an ActorRef's snapshot.`);
   }
-  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, ...[options]);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -247,7 +279,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(actorRef.logic, options));
+  useActorLifecycle(actorRef, setActorRef, () => xstate.createActor(actorRef.logic, readyActor ? actorRef.options : options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
@@ -257,7 +289,8 @@ function useActor(logic, ...[options]) {
  * @deprecated Use `useActor(machine, options)`.
  * @public
  */
-function useMachine(machine, ...[options]) {
+
+function useMachine(machine, options) {
   return useActor(machine, options);
 }
 

package/dist/xstate-react.development.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { _toObserver, createActor, _hotSwapActorLogic } from 'xstate';
+import { _toObserver, createActor, _hotSwapActorLogic, Actor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
@@ -9,15 +9,23 @@ function isStateMachine(logic) {
   return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
 }
 
+/**
+ * An already-created actor (e.g. from `restoreActor`). Hooks use it as is
+ * instead of creating one from logic.
+ */
+function isActor(value) {
+  return value instanceof Actor;
+}
+
 // The hook updates the sources of its machine on later renders. A per-hook
 // copy keeps those updates from reaching the caller's machine, which may be
 // shared by other actors.
 function ownLogic(logic) {
   return isStateMachine(logic) ? logic.provide({}) : logic;
 }
-function useIdleActorRef(logic, ...[options]) {
+function useIdleActorRef(logicOrActor, ...[options]) {
   const [actorRef, setActorRef] = useState(() => {
-    return createActor(ownLogic(logic), options);
+    return isActor(logicOrActor) ? logicOrActor : createActor(ownLogic(logicOrActor), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -31,6 +39,11 @@ function useIdleActorRef(logic, ...[options]) {
   // `machine.provide()` for the same machine config.
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
+    // A ready actor is owned as is; its logic is not updated by later renders.
+    if (isActor(logicOrActor)) {
+      return;
+    }
+    const logic = logicOrActor;
     const currentLogic = actorRef.logic;
     const refreshed = refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
@@ -88,9 +101,19 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
   }, [actorRef]);
 }
 
-/** @public */
-function useActorRef(machine, ...[options, observerOrListener]) {
-  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`), starts it on mount and stops it on unmount. Create a passed
+ * actor once, e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActorRef(logicOrActor, ...args) {
+  const readyActor = isActor(logicOrActor);
+  const options = readyActor ? undefined : args[0];
+  const observerOrListener = readyActor ? args[0] : args[1];
+  const [actorRef, setActorRef] = useIdleActorRef(logicOrActor, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -140,9 +163,10 @@ function createActorContext(actorLogic, actorOptions) {
   function Provider({
     children,
     logic: providedLogic = actorLogic,
-    options: providedOptions
+    options: providedOptions,
+    actor: providedActor
   }) {
-    const actor = useActorRef(providedLogic, {
+    const actor = useActorRef(providedActor ?? providedLogic, providedActor ? undefined : {
       ...actorOptions,
       ...providedOptions
     });
@@ -198,12 +222,20 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-/** @public */
-function useActor(logic, ...[options]) {
-  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
-    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`) and subscribes to its snapshot. Create a passed actor once,
+ * e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActor(logic, options) {
+  const readyActor = isActor(logic);
+  if (!readyActor && !!logic && 'send' in logic && typeof logic.send === 'function') {
+    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Pass an Actor created with createActor()/restoreActor(), or use the useSelector(actorRef, ...) hook to read an ActorRef's snapshot.`);
   }
-  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, ...[options]);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -221,7 +253,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  useActorLifecycle(actorRef, setActorRef, () => createActor(actorRef.logic, options));
+  useActorLifecycle(actorRef, setActorRef, () => createActor(actorRef.logic, readyActor ? actorRef.options : options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
@@ -231,7 +263,8 @@ function useActor(logic, ...[options]) {
  * @deprecated Use `useActor(machine, options)`.
  * @public
  */
-function useMachine(machine, ...[options]) {
+
+function useMachine(machine, options) {
   return useActor(machine, options);
 }
 

package/dist/xstate-react.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { _toObserver, createActor } from 'xstate';
+import { _toObserver, createActor, Actor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
@@ -9,15 +9,23 @@ function isStateMachine(logic) {
   return typeof logic.provide === 'function' && !!logic.config && !!logic.sources;
 }
 
+/**
+ * An already-created actor (e.g. from `restoreActor`). Hooks use it as is
+ * instead of creating one from logic.
+ */
+function isActor(value) {
+  return value instanceof Actor;
+}
+
 // The hook updates the sources of its machine on later renders. A per-hook
 // copy keeps those updates from reaching the caller's machine, which may be
 // shared by other actors.
 function ownLogic(logic) {
   return isStateMachine(logic) ? logic.provide({}) : logic;
 }
-function useIdleActorRef(logic, ...[options]) {
+function useIdleActorRef(logicOrActor, ...[options]) {
   const [actorRef, setActorRef] = useState(() => {
-    return createActor(ownLogic(logic), options);
+    return isActor(logicOrActor) ? logicOrActor : createActor(ownLogic(logicOrActor), options);
   });
   // An object whose identity changes only when React Fast Refresh re-renders
   // this component. Fast Refresh ignores dependency lists while it applies an
@@ -31,6 +39,11 @@ function useIdleActorRef(logic, ...[options]) {
   // `machine.provide()` for the same machine config.
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
+    // A ready actor is owned as is; its logic is not updated by later renders.
+    if (isActor(logicOrActor)) {
+      return;
+    }
+    const logic = logicOrActor;
     const currentLogic = actorRef.logic;
     refreshSignalRef.current !== refreshSignal;
     refreshSignalRef.current = refreshSignal;
@@ -78,9 +91,19 @@ function useActorLifecycle(actorRef, setActorRef, createReplacement) {
   }, [actorRef]);
 }
 
-/** @public */
-function useActorRef(machine, ...[options, observerOrListener]) {
-  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`), starts it on mount and stops it on unmount. Create a passed
+ * actor once, e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActorRef(logicOrActor, ...args) {
+  const readyActor = isActor(logicOrActor);
+  const options = readyActor ? undefined : args[0];
+  const observerOrListener = readyActor ? args[0] : args[1];
+  const [actorRef, setActorRef] = useIdleActorRef(logicOrActor, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -130,9 +153,10 @@ function createActorContext(actorLogic, actorOptions) {
   function Provider({
     children,
     logic: providedLogic = actorLogic,
-    options: providedOptions
+    options: providedOptions,
+    actor: providedActor
   }) {
-    const actor = useActorRef(providedLogic, {
+    const actor = useActorRef(providedActor ?? providedLogic, providedActor ? undefined : {
       ...actorOptions,
       ...providedOptions
     });
@@ -188,9 +212,17 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-/** @public */
-function useActor(logic, ...[options]) {
-  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
+/**
+ * Creates an actor from `logic` (or uses an already-created `actor`, e.g. from
+ * `restoreActor`) and subscribes to its snapshot. Create a passed actor once,
+ * e.g. `useState(() => restoreActor(machine, persisted))[0]`.
+ *
+ * @public
+ */
+
+function useActor(logic, options) {
+  const readyActor = isActor(logic);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, ...[options]);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -208,7 +240,7 @@ function useActor(logic, ...[options]) {
   if (snapshotWithStatus?.status === 'error') {
     throw snapshotWithStatus.error;
   }
-  useActorLifecycle(actorRef, setActorRef, () => createActor(actorRef.logic, options));
+  useActorLifecycle(actorRef, setActorRef, () => createActor(actorRef.logic, readyActor ? actorRef.options : options));
   return [actorSnapshot, actorRef.send, actorRef];
 }
 
@@ -218,7 +250,8 @@ function useActor(logic, ...[options]) {
  * @deprecated Use `useActor(machine, options)`.
  * @public
  */
-function useMachine(machine, ...[options]) {
+
+function useMachine(machine, options) {
   return useActor(machine, options);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "7.0.0-alpha.7",
+  "version": "7.0.0-beta.0",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -54,7 +54,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "xstate": "^6.0.0-alpha.73"
+    "xstate": "^6.0.0-beta.0"
   },
   "dependencies": {
     "use-isomorphic-layout-effect": "^1.1.2",
@@ -69,7 +69,7 @@
     "react-dom": "^19.0.0",
     "rxjs": "^7.8.1",
     "zod": "^3.25.51",
-    "xstate": "^6.0.0-alpha.73"
+    "xstate": "^6.0.0-beta.0"
   },
   "scripts": {}
 }