@xstate/react 6.1.0 → 7.0.0-alpha.1

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

@@ -3,7 +3,7 @@ export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLo
     options?: ActorOptions<TLogic> & {
         [K in RequiredActorOptionsKeys<TLogic>]: unknown;
     }
-], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): Actor<TLogic>;
+], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [Actor<TLogic>, (actorRef: Actor<TLogic>) => void];
 export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: IsNotNever<RequiredActorOptionsKeys<TLogic>> extends true ? [
     options: ActorOptions<TLogic> & {
         [K in RequiredActorOptionsKeys<TLogic>]: unknown;

package/dist/xstate-react.cjs.js

@@ -31,51 +31,18 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
-    const actorRef = xstate.createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = React.useState(() => {
+    return xstate.createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = xstate.createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
@@ -83,10 +50,10 @@ function useIdleActorRef(logic, ...[options]) {
   useIsomorphicLayoutEffect__default["default"](() => {
     actorRef.logic.implementations = logic.implementations;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -97,9 +64,22 @@ function useActorRef(machine, ...[options, observerOrListener]) {
     };
   }, [observerOrListener]);
   React.useEffect(() => {
+    // If the actor was stopped by a previous cleanup (e.g. strict mode),
+    // create a fresh actor. The setActorRef triggers a re-render so
+    // useSyncExternalStore re-subscribes to the new actor.
+    // Only recreate if externally stopped ('stopped' status from XSTATE_STOP),
+    // not if it completed naturally ('done'/'error' status).
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = xstate.createActor(machine, actorRef.options);
+      newActor.start();
+      setActorRef(newActor);
+      // No cleanup — the re-render will run this effect again with the
+      // new actorRef (which is Running), registering the stop cleanup then.
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return actorRef;
@@ -199,7 +179,7 @@ function shallowEqual(objA, objB) {
 }
 
 function useActor(logic, ...[options]) {
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -218,9 +198,15 @@ function useActor(logic, ...[options]) {
     throw snapshotWithStatus.error;
   }
   React.useEffect(() => {
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = xstate.createActor(logic, options);
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

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

@@ -31,51 +31,18 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
-    const actorRef = xstate.createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = React.useState(() => {
+    return xstate.createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = xstate.createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
@@ -83,10 +50,10 @@ function useIdleActorRef(logic, ...[options]) {
   useIsomorphicLayoutEffect__default["default"](() => {
     actorRef.logic.implementations = logic.implementations;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -97,9 +64,22 @@ function useActorRef(machine, ...[options, observerOrListener]) {
     };
   }, [observerOrListener]);
   React.useEffect(() => {
+    // If the actor was stopped by a previous cleanup (e.g. strict mode),
+    // create a fresh actor. The setActorRef triggers a re-render so
+    // useSyncExternalStore re-subscribes to the new actor.
+    // Only recreate if externally stopped ('stopped' status from XSTATE_STOP),
+    // not if it completed naturally ('done'/'error' status).
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = xstate.createActor(machine, actorRef.options);
+      newActor.start();
+      setActorRef(newActor);
+      // No cleanup — the re-render will run this effect again with the
+      // new actorRef (which is Running), registering the stop cleanup then.
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return actorRef;
@@ -202,7 +182,7 @@ 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.`);
   }
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -221,9 +201,15 @@ function useActor(logic, ...[options]) {
     throw snapshotWithStatus.error;
   }
   React.useEffect(() => {
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = xstate.createActor(logic, options);
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

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

@@ -5,51 +5,18 @@ import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = useState(() => {
-    const actorRef = createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = useState(() => {
+    return createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
@@ -57,10 +24,10 @@ function useIdleActorRef(logic, ...[options]) {
   useIsomorphicLayoutEffect(() => {
     actorRef.logic.implementations = logic.implementations;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -71,9 +38,22 @@ function useActorRef(machine, ...[options, observerOrListener]) {
     };
   }, [observerOrListener]);
   useEffect(() => {
+    // If the actor was stopped by a previous cleanup (e.g. strict mode),
+    // create a fresh actor. The setActorRef triggers a re-render so
+    // useSyncExternalStore re-subscribes to the new actor.
+    // Only recreate if externally stopped ('stopped' status from XSTATE_STOP),
+    // not if it completed naturally ('done'/'error' status).
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createActor(machine, actorRef.options);
+      newActor.start();
+      setActorRef(newActor);
+      // No cleanup — the re-render will run this effect again with the
+      // new actorRef (which is Running), registering the stop cleanup then.
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return actorRef;
@@ -176,7 +156,7 @@ 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.`);
   }
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -195,9 +175,15 @@ function useActor(logic, ...[options]) {
     throw snapshotWithStatus.error;
   }
   useEffect(() => {
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createActor(logic, options);
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

package/dist/xstate-react.esm.js

@@ -5,51 +5,18 @@ import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-const forEachActor = (actorRef, callback) => {
-  callback(actorRef);
-  const children = actorRef.getSnapshot().children;
-  if (children) {
-    Object.values(children).forEach(child => {
-      forEachActor(child, callback);
-    });
-  }
-};
-function stopRootWithRehydration(actorRef) {
-  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
-  // we do it to avoid setState in useEffect when the effect gets "reconnected"
-  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
-  // it also just allows us to end up with a somewhat more predictable behavior for the users
-  const persistedSnapshots = [];
-  forEachActor(actorRef, ref => {
-    persistedSnapshots.push([ref, ref.getSnapshot()]);
-    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
-    // React reconnects its subscribers (from the useSyncExternalStore) on its own
-    // and userland subscribers should basically always do the same anyway
-    // as each subscription should have its own cleanup logic and that should be called each such reconnect
-    ref.observers = new Set();
-  });
-  const systemSnapshot = actorRef.system.getSnapshot?.();
-  actorRef.stop();
-  actorRef.system._snapshot = systemSnapshot;
-  persistedSnapshots.forEach(([ref, snapshot]) => {
-    ref._processingStatus = 0;
-    ref._snapshot = snapshot;
-  });
-}
-
 function useIdleActorRef(logic, ...[options]) {
-  let [[currentConfig, actorRef], setCurrent] = useState(() => {
-    const actorRef = createActor(logic, options);
-    return [logic.config, actorRef];
+  let [actorRef, setActorRef] = useState(() => {
+    return createActor(logic, options);
   });
-  if (logic.config !== currentConfig) {
+  if (logic.config !== actorRef.logic.config) {
     const newActorRef = createActor(logic, {
       ...options,
       snapshot: actorRef.getPersistedSnapshot({
         __unsafeAllowInlineActors: true
       })
     });
-    setCurrent([logic.config, newActorRef]);
+    setActorRef(newActorRef);
     actorRef = newActorRef;
   }
 
@@ -57,10 +24,10 @@ function useIdleActorRef(logic, ...[options]) {
   useIsomorphicLayoutEffect(() => {
     actorRef.logic.implementations = logic.implementations;
   });
-  return actorRef;
+  return [actorRef, setActorRef];
 }
 function useActorRef(machine, ...[options, observerOrListener]) {
-  const actorRef = useIdleActorRef(machine, options);
+  const [actorRef, setActorRef] = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -71,9 +38,22 @@ function useActorRef(machine, ...[options, observerOrListener]) {
     };
   }, [observerOrListener]);
   useEffect(() => {
+    // If the actor was stopped by a previous cleanup (e.g. strict mode),
+    // create a fresh actor. The setActorRef triggers a re-render so
+    // useSyncExternalStore re-subscribes to the new actor.
+    // Only recreate if externally stopped ('stopped' status from XSTATE_STOP),
+    // not if it completed naturally ('done'/'error' status).
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createActor(machine, actorRef.options);
+      newActor.start();
+      setActorRef(newActor);
+      // No cleanup — the re-render will run this effect again with the
+      // new actorRef (which is Running), registering the stop cleanup then.
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return actorRef;
@@ -173,7 +153,7 @@ function shallowEqual(objA, objB) {
 }
 
 function useActor(logic, ...[options]) {
-  const actorRef = useIdleActorRef(logic, options);
+  const [actorRef, setActorRef] = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -192,9 +172,15 @@ function useActor(logic, ...[options]) {
     throw snapshotWithStatus.error;
   }
   useEffect(() => {
+    if (actorRef._processingStatus === 2 /* ProcessingStatus.Stopped */ && actorRef.getSnapshot()?.status === 'stopped') {
+      const newActor = createActor(logic, options);
+      newActor.start();
+      setActorRef(newActor);
+      return;
+    }
     actorRef.start();
     return () => {
-      stopRootWithRehydration(actorRef);
+      actorRef.stop();
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "6.1.0",
+  "version": "7.0.0-alpha.1",
   "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": "^5.28.0"
+    "xstate": "^6.0.0-alpha.1"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -73,7 +73,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rxjs": "^7.8.1",
-    "xstate": "^5.28.0"
+    "zod": "^3.25.51",
+    "xstate": "^6.0.0-alpha.1"
   },
   "scripts": {}
 }