fix: Authenticator issue where InitMachine useEffect runs every render (

#1489)

.changeset/nine-camels-cover.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix: Authenticator issue where InitMachine useEffect runs every render, causing `children` of `Authenticator` to be unmounted and remounted on every render.

packages/react/src/components/Authenticator/Authenticator.tsx

@@ -20,6 +20,24 @@ export type AuthenticatorProps = AuthenticatorMachineOptions &
   RouterProps &
   ComponentsProviderProps;
 
+// Helper component that sends init event to the parent provider
+function InitMachine({ children, ...data }) {
+  const { _send, route } = useAuthenticator();
+
+  const hasInitialized = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!hasInitialized.current && route === 'idle') {
+      _send({
+        type: 'INIT',
+        data,
+      });
+      hasInitialized.current = true;
+    }
+  }, [_send, route, data]);
+  return <>{children}</>;
+}
+
 export function Authenticator({
   children,
   className,
@@ -43,20 +61,6 @@ export function Authenticator({
     formFields,
   };
 
-  // Helper component that sends init event to the parent provider
-  function InitMachine({ children, ...machineProps }) {
-    const { _send, route } = useAuthenticator();
-    React.useEffect(() => {
-      if (route === 'idle') {
-        _send({
-          type: 'INIT',
-          data: machineProps,
-        });
-      }
-    }, []);
-    return <>{children}</>;
-  }
-
   return (
     <Provider>
       <CustomComponentsContext.Provider value={{ components }}>