Refactor `@xstate/react` to useSyncExternalStore #2939

Andarist · 2022-01-13T16:48:16Z

closes #3196
closes #2821

…TL upgrade

changeset-bot · 2022-01-13T16:48:18Z

🦋 Changeset detected

Latest commit: 0268477

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@xstate/react	Major
xstate	Patch
@xstate/fsm	Major
@xstate/svelte	Major
@xstate/vue	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

ghost · 2022-01-13T16:49:09Z

CodeSee Review Map:

Review in an interactive map

View more CodeSee Maps

Legend

…g back caching of the `service.initialState`

packages/core/src/interpreter.ts

Andarist · 2022-01-13T17:12:56Z

packages/xstate-react/package.json

+    "react": "18.0.0-rc.0-next-811634762-20220110",
+    "react-dom": "18.0.0-rc.0-next-811634762-20220110",


Before landing this we should set up tests to run against both React 17 and React 18. It's totally doable - I just didn't bother to do it right now.

This should also only land after React 18 gets finally released.

OTOH - I don't think now that this would add much value here. Stuff that works with React 18 should just work with React 17. So it might be enough to just test with React 18. We can always also revisit adding extra tests for React 17 in the future.

packages/xstate-react/src/index.ts

Andarist · 2022-01-13T17:15:31Z

packages/xstate-react/src/useInterpret.ts

@@ -36,18 +35,15 @@ function toObserver<T>(
  };
 }

-export function useInterpret<
+export function useIdleInterpreter<


Not the best name... but naming things is hard™ and naming some hooks is even harder 😅

Andarist · 2022-01-13T17:20:31Z

packages/xstate-react/src/useMachine.ts

-  const service = useInterpret(getMachine, options, listener);
+  useEffect(() => {
+    const rehydratedState = options.state;
+    service.start(


After those changes, useMachine no longer depends on the useInterpret. useInterpret starts the machine in the layout effect but this one has to do that in the passive effect. Maybe we should change the behavior of the useInterpret too - but I've wanted to avoid changing too much now. I've also wanted to change this for now because how the listener/subscriber gets wired is now different and has to be managed here, in the useMachine, but it was previously managed by useInterpret. Technically, we could just not pass any subscriber to the useInterpret and just subscribe with useSyncExternalStore here... and maybe that is something that we should do.

Actually, I've added a comment on why we can't use useInterpret here right now:
47f566c#diff-19f47c3f58ef51d8a79a32343f5c32c02d6d7237ecc29f636cb53846d00424d5R68-R69

Andarist · 2022-01-13T17:22:17Z

packages/xstate-react/src/useMachine.ts

+  const storeSnapshot = useSyncExternalStoreWithSelector(
+    subscribe,
+    getSnapshot,
+    undefined,


This is an argument slot for getServerSnapshot. I'm not yet sure how this should work... maybe we should just use the initialState for it? It somewhat doesn't matter for useMachine because nothing should be able to change its state between render and the commit phase but all the other hooks are also using the useSyncExternalStore stuff and the same cannot be said about them - so we should think how this should be handled there.

Andarist · 2022-01-13T17:31:56Z

packages/xstate-react/src/useMachine.ts

-    []
+    [service]
+  );
+  const storeSnapshot = useSyncExternalStoreWithSelector(


useMachine kinda shouldn't have to use useSyncExternalStoreWithSelector - it could use the simpler useSyncExternalStore, but to make this possible we'd have to have immutable states without .changed

# Conflicts: # packages/xstate-react/src/index.ts # packages/xstate-react/src/useActor.ts # packages/xstate-react/src/useInterpret.ts # packages/xstate-react/src/useMachine.ts # packages/xstate-react/src/useReactEffectActions.ts # packages/xstate-react/test/useMachine.test.tsx # packages/xstate-react/test/useService.test.tsx

codesandbox-ci · 2022-01-27T13:25:32Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0268477:

Sandbox	Source
XState Example Template	Configuration
XState React Template	Configuration

# Conflicts: # .changeset/red-ants-lick.md # packages/xstate-react/package.json # packages/xstate-react/src/useInterpret.ts # packages/xstate-react/src/useMachine.ts # packages/xstate-react/test/useActor.test.tsx # packages/xstate-react/test/useMachine.test.tsx # packages/xstate-react/test/useSelector.test.tsx

packages/xstate-react/src/useInterpret.ts

packages/core/src/interpreter.ts

koenoe · 2022-04-01T12:35:29Z

Nice!!

davidkpiano · 2022-04-01T15:48:29Z

packages/xstate-react/src/fsm.ts

-      }
-    };
-  }, [service]);
+  const isEqual = useCallback(


Can this just be declared externally?

ah, yes - this one here, for /fsm, doesn't require access to the local service - so it can be hoisted

good 👁️ 👍

Andarist · 2022-04-04T13:14:48Z

packages/xstate-fsm/test/fsm.test.ts

@@ -462,4 +390,150 @@ describe('interpreter', () => {

    expect(nextState.actions.map((a) => a.type)).toEqual(['action']);
  });
+
+  describe('`start` method', () => {


this block has just been moved to the bottom as tests were sort of mixed and the order in the file didn't match the order in the test report

packages/xstate-fsm/test/fsm.test.ts

Andarist · 2022-04-04T13:18:45Z

packages/xstate-react/src/fsm.ts

    if (options) {
      (service as any)._machine._options = options;
    }
  });

+  const useServiceResult = useService(service);
+
  useEffect(() => {


after those changes @xstate/fsm should be nicely compatible with StrictMode and Fast Refresh (something that can't be said about the core 😬 )

We still can't use the "incoming" machine config from the Fast Refresh though but at least we don't display outdated state after Fast Refresh nor we don't have to fully restart the service so the state is preserved.

Andarist · 2022-04-04T13:20:15Z

packages/xstate-react/src/useMachine.ts

+      const initialStateChanged =
+        nextState.changed === undefined &&
+        (Object.keys(nextState.children).length > 0 ||
+          typeof prevState.changed === 'boolean');


this additional condition here allows us to "restart" to the initial state after Fast Refresh, whereas previously we were displaying the outdated state that was no longer true for the current, restarted, service

.changeset/rude-laws-battle.md

…mespace

davidkpiano · 2022-04-06T12:28:34Z

packages/xstate-react/test/useMachine-fsm.test.tsx

+
+    const { rerender } = render(<App value={1} />);
+
+    expect(actual).toEqual(suiteKey === 'strict' ? [1, 1] : [1]);


.changeset/hungry-dryers-bow.md

davidkpiano

🚢 ⚛️ 1️⃣ 8️⃣

Co-authored-by: David Khourshid <davidkpiano@gmail.com>

Refactor `@xstate/react` to useSyncExternalStore

Andarist added 5 commits January 13, 2022 09:55

Test @xstate/react with React 18 and refactor related tests after R…

4f82406

…TL upgrade

Skip/adjust test cases after initial investigation

6354d9a

Refactor useMachine to be based on the useSyncExternalStoreWithSelector

d2b4d19

Refactor useSelector to be based on the useSyncExternalStoreWithSelector

f4b7394

Refactor useActor to be based on the useSyncExternalStoreWithSelector

dfc1559

Fixed issues with getSnapshot not returning a stable value by bringin…

4bb3a91

…g back caching of the `service.initialState`

Andarist commented Jan 13, 2022

View reviewed changes

packages/core/src/interpreter.ts Show resolved Hide resolved

Andarist commented Jan 13, 2022

View reviewed changes

packages/core/src/interpreter.ts Show resolved Hide resolved

Andarist commented Jan 13, 2022

View reviewed changes

packages/xstate-react/src/index.ts Show resolved Hide resolved

Andarist commented Jan 13, 2022

View reviewed changes

Andarist added 5 commits January 17, 2022 12:08

Temporarily provide getSnapshot as getServerSnapshot too

29b8c42

Add explicit return type annotation to useSelector

39fe2bc

Fixed the wrongly annotated return type of the useSelector

1f07718

Use node 14 on CodeSandbox CI

6a4f5c8

Andarist added 2 commits March 29, 2022 20:16

Update React deps

700693e

davidkpiano reviewed Mar 29, 2022

View reviewed changes

packages/xstate-react/src/useInterpret.ts Show resolved Hide resolved

Andarist added 5 commits March 29, 2022 22:00

Start machines in passive effects

3df1745

Drop toObserver copies

20e2f2f

Simplify useIdleInterpreter signature

56e1a23

Rewrite hooks for @xstate/fsm

31f6516

Remove use-subscription dependency

e1603bb

Andarist commented Apr 1, 2022

View reviewed changes

packages/core/src/interpreter.ts Show resolved Hide resolved

davidkpiano reviewed Apr 1, 2022

View reviewed changes

Andarist added 6 commits April 2, 2022 00:38

Add event queueing to @xstate/react/fsm

c27687b

Add more @xstate/react/fsm tests

f2e6d80

Reuse useService in useMachine (@xstate/react/fsm)

415df1f

Make useMachine to roll back to initial state on Fast Refresh

7890ff9

Rehydrate machines on subsequent starts in fsm's useMachine

60dc150

Add tests for restarting an FSM service

8823744

Andarist commented Apr 4, 2022

View reviewed changes

packages/xstate-fsm/test/fsm.test.ts Show resolved Hide resolved

Andarist commented Apr 4, 2022

View reviewed changes

packages/xstate-fsm/test/fsm.test.ts Show resolved Hide resolved

Andarist commented Apr 4, 2022

View reviewed changes

packages/xstate-fsm/test/fsm.test.ts Show resolved Hide resolved

Andarist commented Apr 4, 2022

View reviewed changes

add changesets

360e854

Andarist requested a review from davidkpiano April 4, 2022 14:12

davidkpiano reviewed Apr 5, 2022

View reviewed changes

.changeset/rude-laws-battle.md Show resolved Hide resolved

Move some of the added type helpers to the existing StateMachine na…

d02a8d4

…mespace

Andarist force-pushed the react18 branch from 5cc2c2d to d02a8d4 Compare April 5, 2022 13:14

mattpocock mentioned this pull request Apr 6, 2022

Bug: @xstate/react does not support react 18 #3196

Closed

davidkpiano reviewed Apr 6, 2022

View reviewed changes

.changeset/hungry-dryers-bow.md Outdated Show resolved Hide resolved

davidkpiano approved these changes Apr 6, 2022

View reviewed changes

Update .changeset/hungry-dryers-bow.md

0268477

Co-authored-by: David Khourshid <davidkpiano@gmail.com>

Andarist merged commit 4d1ce75 into main Apr 6, 2022

Andarist deleted the react18 branch April 6, 2022 12:49

github-actions bot mentioned this pull request Apr 6, 2022

Version Packages #3155

Merged

nevilm-lt pushed a commit to nevilm-lt/xstate that referenced this pull request Apr 22, 2022

Merge pull request statelyai#2939 from statelyai/react18

b1bfef3

Refactor `@xstate/react` to useSyncExternalStore

wlee221 mentioned this pull request Apr 29, 2022

fix(react): Compatibility with React 18 useSyncExternalStore hook aws-amplify/amplify-ui#1798

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor `@xstate/react` to useSyncExternalStore #2939

Refactor `@xstate/react` to useSyncExternalStore #2939

Andarist commented Jan 13, 2022 •

edited

changeset-bot bot commented Jan 13, 2022 •

edited

ghost commented Jan 13, 2022 •

edited by ghost

Andarist Jan 13, 2022

Andarist Apr 1, 2022

Andarist Jan 13, 2022

Andarist Jan 13, 2022

Andarist Apr 1, 2022

Andarist Jan 13, 2022

Andarist Jan 13, 2022

codesandbox-ci bot commented Jan 27, 2022 •

edited

koenoe commented Apr 1, 2022

davidkpiano Apr 1, 2022

Andarist Apr 1, 2022

Andarist Apr 4, 2022

Andarist Apr 4, 2022

Andarist Apr 4, 2022

davidkpiano Apr 6, 2022

davidkpiano left a comment

		"react": "18.0.0-rc.0-next-811634762-20220110",
		"react-dom": "18.0.0-rc.0-next-811634762-20220110",


		const { rerender } = render(<App value={1} />);

		expect(actual).toEqual(suiteKey === 'strict' ? [1, 1] : [1]);

Refactor @xstate/react to useSyncExternalStore #2939

Refactor @xstate/react to useSyncExternalStore #2939

Conversation

Andarist commented Jan 13, 2022 • edited

changeset-bot bot commented Jan 13, 2022 • edited

🦋 Changeset detected

ghost commented Jan 13, 2022 • edited by ghost

CodeSee Review Map:

Legend

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Jan 27, 2022 • edited

koenoe commented Apr 1, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidkpiano left a comment

Choose a reason for hiding this comment

Refactor `@xstate/react` to useSyncExternalStore #2939

Refactor `@xstate/react` to useSyncExternalStore #2939

Andarist commented Jan 13, 2022 •

edited

changeset-bot bot commented Jan 13, 2022 •

edited

ghost commented Jan 13, 2022 •

edited by ghost

codesandbox-ci bot commented Jan 27, 2022 •

edited