refactor(react): optimize react layer

.changeset/early-spies-beg.md

@@ -0,0 +1,9 @@
+---
+'@xstate/store': patch
+---
+
+- replace use-sync-external-store/shim with useSyncExternalStore from react
+- do not memoize getSnapshot in uSES
+- implement getServerSnapshot in uSES
+- expect store to always be defined
+- update react types to v18 and testing library to v16

packages/core/src/stateUtils.ts

@@ -158,10 +158,9 @@ function getValueFromAdj(baseNode: AnyStateNode, adjList: AdjList): StateValue {
   return stateValue;
 }
 
-function getAdjList<
-  TContext extends MachineContext,
-  TE extends EventObject
->(stateNodes: StateNodeIterable<TContext, TE>): AdjList {
+function getAdjList<TContext extends MachineContext, TE extends EventObject>(
+  stateNodes: StateNodeIterable<TContext, TE>
+): AdjList {
   const adjList: AdjList = new Map();
 
   for (const s of stateNodes) {
@@ -528,9 +527,7 @@ function isHistoryNode(
   return stateNode.type === 'history';
 }
 
-function getInitialStateNodesWithTheirAncestors(
-  stateNode: AnyStateNode
-) {
+function getInitialStateNodesWithTheirAncestors(stateNode: AnyStateNode) {
   const states = getInitialStateNodes(stateNode);
   for (const initialState of states) {
     for (const ancestor of getProperAncestors(initialState, stateNode)) {
@@ -562,10 +559,7 @@ export function getInitialStateNodes(stateNode: AnyStateNode) {
   return set;
 }
 /** Returns the child state node from its relative `stateKey`, or throws. */
-function getStateNode(
-  stateNode: AnyStateNode,
-  stateKey: string
-): AnyStateNode {
+function getStateNode(stateNode: AnyStateNode, stateKey: string): AnyStateNode {
   if (isStateId(stateKey)) {
     return stateNode.machine.getStateNodeById(stateKey);
   }

packages/xstate-react/package.json

@@ -67,9 +67,9 @@
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.2.1",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

packages/xstate-react/src/useActor.ts

@@ -27,7 +27,7 @@ export function useActor<TLogic extends AnyActorLogic>(
   }, [actorRef]);
 
   const subscribe = useCallback(
-    (handleStoreChange) => {
+    (handleStoreChange: () => void) => {
       const { unsubscribe } = actorRef.subscribe(handleStoreChange);
       return unsubscribe;
     },

packages/xstate-react/test/createActorContext.test.tsx

@@ -37,7 +37,7 @@ describe('createActorContext', () => {
     const SomeContext = createActorContext(someMachine);
 
     const Component = () => {
-      const value = SomeContext.useSelector((state) => state.value);
+      const value = SomeContext.useSelector((state) => state.value as string);
 
       return <div data-testid="value">{value}</div>;
     };
@@ -76,7 +76,7 @@ describe('createActorContext', () => {
 
       return (
         <>
-          <div data-testid="value">{state.value}</div>
+          <div data-testid="value">{state.value as string}</div>
           <button
             data-testid="next"
             onClick={() => actorRef.send({ type: 'NEXT' })}
@@ -196,7 +196,7 @@ describe('createActorContext', () => {
       const actor = SomeContext.useActorRef();
       const value = useSelector(actor, (state) => state.value);
 
-      return <div data-testid="value">{value}</div>;
+      return <div data-testid="value">{value as string}</div>;
     };
 
     const App = () => {
@@ -412,7 +412,7 @@ describe('createActorContext', () => {
             actorRef.send({ type: 'next' });
           }}
         >
-          {state.value}
+          {state.value as string}
         </div>
       );
     };

packages/xstate-react/test/useActor.test.tsx

@@ -694,7 +694,7 @@ describeEachReactMode('useActor (%s)', ({ suiteKey, render }) => {
       const [state, send] = useActor(machine);
       return (
         <>
-          <div data-testid="result">{state.value}</div>
+          <div data-testid="result">{state.value as string}</div>
           <button onClick={() => send({ type: 'EV' })} />
         </>
       );
@@ -740,7 +740,7 @@ describeEachReactMode('useActor (%s)', ({ suiteKey, render }) => {
       );
       return (
         <>
-          <div data-testid="result">{state.value}</div>
+          <div data-testid="result">{state.value as string}</div>
           <button onClick={() => send({ type: 'EV' })} />
         </>
       );

packages/xstate-react/test/useActorRef.test.tsx

@@ -193,7 +193,7 @@ describeEachReactMode('useActorRef (%s)', ({ suiteKey, render }) => {
           >
             Send to child
           </button>
-          <div data-testid="child-state">{childState.value}</div>
+          <div data-testid="child-state">{childState.value as string}</div>
         </>
       );
     };
@@ -251,7 +251,7 @@ describeEachReactMode('useActorRef (%s)', ({ suiteKey, render }) => {
           >
             Send to child
           </button>
-          <div data-testid="child-state">{childState.value}</div>
+          <div data-testid="child-state">{childState.value as string}</div>
         </>
       );
     };
@@ -325,7 +325,7 @@ describeEachReactMode('useActorRef (%s)', ({ suiteKey, render }) => {
 
   it('should work with a promise actor', async () => {
     const promiseLogic = fromPromise(
-      () => new Promise((resolve) => setTimeout(() => resolve(42), 10))
+      () => new Promise<number>((resolve) => setTimeout(() => resolve(42), 10))
     );
 
     const App = () => {
@@ -506,7 +506,7 @@ describeEachReactMode('useActorRef (%s)', ({ suiteKey, render }) => {
           >
             Send event
           </button>
-          <span>{value}</span>
+          <span>{value as string}</span>
         </>
       );
     }
@@ -565,7 +565,7 @@ describeEachReactMode('useActorRef (%s)', ({ suiteKey, render }) => {
           >
             Send event
           </button>
-          <span>{value}</span>
+          <span>{value as string}</span>
         </>
       );
     }

packages/xstate-react/test/useSelector.test.tsx

@@ -682,7 +682,7 @@ describeEachReactMode('useSelector (%s)', ({ suiteKey, render }) => {
 
       return (
         <>
-          <div data-testid="child-state">{childState.value}</div>
+          <div data-testid="child-state">{childState.value as string}</div>
           <button
             data-testid="child-send"
             onClick={() => childRef.send({ type: 'NEXT' })}

packages/xstate-store/package.json

@@ -45,11 +45,9 @@
   "bugs": {
     "url": "https://github.com/statelyai/xstate/issues"
   },
-  "dependencies": {
-    "use-sync-external-store": "^1.2.0"
-  },
   "devDependencies": {
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
     "@xstate/react": "^4.1.1",
     "@xstate/vue": "^3.1.2",
     "immer": "^10.0.2",

packages/xstate-store/src/react.ts

@@ -1,15 +1,24 @@
-import { useCallback } from 'react';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
 import { Store, SnapshotFromStore } from './types';
 
-type SyncExternalStoreSubscribe = Parameters<
-  typeof useSyncExternalStoreWithSelector
->[0];
-
-function defaultCompare<T>(a: T, b: T) {
+function defaultCompare<T>(a: T | undefined, b: T) {
   return a === b;
 }
 
+function useSelectorWithCompare<TStore extends Store<any, any>, T>(
+  selector: (snapshot: SnapshotFromStore<TStore>) => T,
+  compare: (a: T | undefined, b: T) => boolean
+): (snapshot: SnapshotFromStore<TStore>) => T {
+  const previous = useRef<T>();
+
+  return (state) => {
+    const next = selector(state);
+    return compare(previous.current, next)
+      ? (previous.current as T)
+      : (previous.current = next);
+  };
+}
+
 /**
  * A React hook that subscribes to the `store` and selects a value from the
  * store's snapshot, with an optional compare function.
@@ -31,36 +40,22 @@ function defaultCompare<T>(a: T, b: T) {
  *   previous value
  * @returns The selected value
  */
-export function useSelector<TStore extends Store<any, any> | undefined, T>(
+export function useSelector<TStore extends Store<any, any>, T>(
   store: TStore,
-  selector: (
-    snapshot: TStore extends Store<any, any>
-      ? SnapshotFromStore<TStore>
-      : undefined
-  ) => T,
-  compare: (a: T, b: T) => boolean = defaultCompare
+  selector: (snapshot: SnapshotFromStore<TStore>) => T,
+  compare: (a: T | undefined, b: T) => boolean = defaultCompare
 ): T {
-  const subscribe: SyncExternalStoreSubscribe = useCallback(
-    (handleStoreChange) => {
-      if (!store) {
-        return () => {};
-      }
-      const { unsubscribe } = store.subscribe(handleStoreChange);
-      return unsubscribe;
-    },
-    [store]
-  );
-
-  const boundGetSnapshot = useCallback(() => store?.getSnapshot(), [store]);
+  const selectorWithCompare = useSelectorWithCompare(selector, compare);
 
-  const selectedSnapshot = useSyncExternalStoreWithSelector(
-    subscribe,
-    // @ts-ignore
-    boundGetSnapshot,
-    boundGetSnapshot,
-    selector,
-    compare
+  return useSyncExternalStore(
+    useCallback(
+      (handleStoreChange) => store.subscribe(handleStoreChange).unsubscribe,
+      [store]
+    ),
+    () => selectorWithCompare(store.getSnapshot() as SnapshotFromStore<TStore>),
+    () =>
+      selectorWithCompare(
+        store.getInitialSnapshot() as SnapshotFromStore<TStore>
+      )
   );
-
-  return selectedSnapshot;
 }