fix(react): Compatibility with React 18 useSyncExternalStore hook (#1798)

* Bump `@xstate/react` to `^3.0.0`

* Add bunch of debug console logs

* Solution first draft

* Remove debugger

* Remove one more debug statement

* Remove _state from destructures

* AuthMachineSend type fix

* Pin @xstate/react

* Revert spacing diffs

* Update comments

* More comment updates

* Update AuthInterpreter type

* Create green-cooks-clap.md

* Add comment for anys

* Remove getSnapshot parameter

Author: wlee221

.changeset/green-cooks-clap.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+fix(react): Add compatibility with React 18 `useSyncExternalStore` hook

packages/react/package.json

@@ -63,7 +63,7 @@
     "@radix-ui/react-dropdown-menu": "0.1.6",
     "@radix-ui/react-slider": "0.1.4",
     "@radix-ui/react-tabs": "0.1.5",
-    "@xstate/react": "1.6.3",
+    "@xstate/react": "3.0.0",
     "classnames": "2.3.1",
     "deepmerge": "4.2.2",
     "lodash": "4.17.21",

packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx

@@ -121,52 +121,23 @@ export const useAuthenticator = (selector?: Selector) => {
   };
 
   /**
-   * For `useSelector`'s selector argument, we just return back the `state`.
-   * The reason is that whenever you select a specific value of the state, the
-   * hook will return *only* that selected value instead of the whole `state`.
+   * For `useSelector`'s selector argument, we transform `state` into
+   * public facade values using `getFacade`.
    *
-   * To provide a consistent set of facade, we let the `selector` trivially return
-   * itself and let comparator decide when to re-render.
+   * This is to hide the internal xstate implementation details to customers.
    */
-  const xstateSelector = (state: AuthMachineState) => state;
-
-  /**
-   * Holds a snapshot copy of last previous facade values. Will be used
-   * on state changes to see if any of facade values have changed.
-   */
-  const prevFacadeRef = React.useRef<ReturnType<typeof getFacade>>();
+  const xstateSelector = (state: AuthMachineState) => getFacade(state);
 
   /**
    * comparator decides whether or not the new authState should trigger a
    * re-render. Does a deep equality check.
    */
   const comparator = (
-    /**
-     * We do not use `_prevState`, because it holds a *reference* to actor
-     * object, of which value could easily mutate between compare calls.
-     *
-     * Instead, we'll use prevFacadeRef for comparison.
-     */
-    _prevState: AuthMachineState,
-    nextState: AuthMachineState
+    prevFacade: ReturnType<typeof getFacade>,
+    nextFacade: ReturnType<typeof getFacade>
   ) => {
     if (!selector) return false;
 
-    /**
-     * We only trigger re-render if any of values in specified selected
-     * values change. First compute the facade for prev and next state.
-     */
-    const prevFacade = prevFacadeRef.current;
-    const nextFacade = getFacade(nextState);
-
-    /**
-     * prevFacadeRef can now be updated with new facade values
-     */
-    prevFacadeRef.current = nextFacade;
-
-    // If this is the first time comparator is called, return false
-    if (!prevFacade) return false;
-
     /**
      * Apply the passed in `selector` to get the value of their desired
      * dependency array.
@@ -179,12 +150,12 @@ export const useAuthenticator = (selector?: Selector) => {
     return areArrayValuesEqual(prevDepsArray, nextDepsArray);
   };
 
-  const state = useSelector(service, xstateSelector, comparator);
+  const facade = useSelector(service, xstateSelector, comparator);
 
   return {
-    ...getFacade(state),
+    ...facade,
     /** @deprecated For internal use only */
-    _state: state,
+    _state: service.getSnapshot(),
     /** @deprecated For internal use only */
     _send: send,
   };

packages/ui/src/types/authenticator/stateMachine/authMachine.ts

@@ -8,8 +8,16 @@ import { AuthEvent } from './event';
 
 /**
  * Intefrace for `authMachine` machine interpreter
+ *
+ * TODO: tighten up anys here
  */
-export type AuthInterpreter = Interpreter<AuthContext, any, AuthEvent>;
+export type AuthInterpreter = Interpreter<
+  AuthContext,
+  any,
+  AuthEvent,
+  any,
+  any
+>;
 
 /**
  * Function type for `send` in `authMachine`