Update react documentation to match latest #1168

docs/src/pages/components/authenticator/advanced/conditional-rendering.react.mdx

@@ -19,7 +19,7 @@ You can use `useAuthenticatorRoute` hook to access `route` string that represent
 import { useAuthenticatorRoute } from '@aws-amplify/ui-react';
 
 const App = () => {
-  const route = useAuthenticatorRoute();
+  const { route } = useAuthenticator(context => [context.route]);
 
   // Use the value of route to decide which page to render
   return route === 'authenticated' ? <Home /> : <Authenticator />;

docs/src/pages/components/authenticator/advanced/current-user.react.mdx

@@ -1,11 +1,10 @@
 You can use `useAuthenticatorUser` hook to access current signed in `user`. If no user is authenticated user, it'll return `undefined`.
 
-```tsx{1,4-5,9-10}
+```tsx{1,4,8-9}
 import { useAuthenticatorUser } from '@aws-amplify/ui-react';
 
 const Home = () => {
-  const user = useAuthenticatorUser();
-  const { signOut } = useAuthenticatorTransitions();
+  const { user, signOut } = useAuthenticator((context) => [context.user]);
 
   return (
     <>

docs/src/pages/components/authenticator/advanced/example.react.mdx

@@ -1,3 +1,3 @@
-```js{3,10-33} file=../../../../../../examples/next/pages/ui/components/authenticator/useAuthenticator/index.page.tsx#L1-L33
+```js{3,10-34} file=../../../../../../examples/next/pages/ui/components/authenticator/useAuthenticator/index.page.tsx#L1-L34
 
 ```

docs/src/pages/components/authenticator/advanced/full-api.react.mdx

@@ -1,9 +1 @@
-import { Alert } from '@aws-amplify/ui-react';
-
-On top of `useAuthenticator*` hooks above, `@aws-amplify/ui-react` provides overarching `useAuthenticator` hook that returns all contexts corresponding to current authenticator state. See table below for the full API list.
-
-<Alert variation="warning">
-  We highly suggest using `useAuthenticator*` hook instead for most cases to
-  prevent undesirable rerenders. Please see [Rendering
-  Optimizations](#rendering-optimizations) below for more context.
-</Alert>
+Below is the full list of context that `useAuthenticator` hook returns.

docs/src/pages/components/authenticator/advanced/full-api.vue.mdx

@@ -1 +1 @@
-The `useAuthenticator` composable above, provides all contexts corresponding to current authenticator state. See table below for the full API list.
+Below is the full list of context that `useAuthenticator` composable returns.

docs/src/pages/components/authenticator/advanced/trigger-transitions.react.mdx

@@ -1,15 +1,11 @@
 You can use `useAuthenticatorTransitions` hook to access functions that lets you trigger transitions to the authenticator. Please see [Full API]() to see all supported transition functions. Any invalid transitions (e.g. `signUp` directly to `authenticated`) will be ignored.
 
-```tsx{1,4-5,7}
-import {
-  useAuthenticatorUser,
-  useAuthenticatorTransitions,
-} from '@aws-amplify/ui-react';
+```tsx{1,4-6}
+import { useAuthenticator } from '@aws-amplify/ui-react';
 
 const Home = () => {
-  const user = useAuthenticatorUser();
-  const { signOut } = useAuthenticatorTransitions();
+  const { user, signOut } = useAuthenticator((context) => [context.user]);
 
-  return <h2>Welcome, {user.username}!</h2>;
+  return <button onClick={signOut}>Welcome, {user.username}!</button>;
 };
 ```

docs/src/pages/components/authenticator/advanced/useAuthenticator.react.mdx

@@ -1,11 +1,39 @@
-`@aws-amplify/ui-react` ships with `useAuthenticator` React hooks that can be used to access, modify, and update Authenticator's auth state. To use them, first wrap your application with `<Authenticator.Provider>`:
+### useAuthenticator Hook
+
+`@aws-amplify/ui-react` ships with `useAuthenticator` React hook that can be used to access, modify, and update Authenticator's auth state. To use them, first wrap your application with `<Authenticator.Provider>`:
 
 ```tsx
 import { Authenticator } from '@aws-amplify/ui-react';
 
-export default = () => (
+export default () => (
   <Authenticator.Provider>
     <App />
   </AmplifyProvider>
 );
 ```
+
+Then, you can use `useAuthenticator` on your App:
+
+```tsx
+import { useAuthenticator } from '@aws-amplify/ui-react';
+
+const App = () => {
+  const { user, signOut } = useAuthenticator((context) => [context.user]);
+  // ...
+};
+```
+
+### Prevent Re-renders
+
+Using `useAuthenticator` hook at your `App` level is risky, because it'll trigger a re-render down its true whenever any of its context changes value.
+
+To prevent undesired re-renders, you can pass a function to `useAuthenticator` that takes in Authenticator context and returns an array of desired context values. This hook will only trigger re-render if any of the array values change.
+
+For example, you can ensure `useAuthenticator` to only reevaluate when its `user` context changes:
+
+```tsx
+import { useAuthenticator } from '@aws-amplify/ui-react';
+
+// hook below is only reevaluated when `user` changes
+const { user, signOut } = useAuthenticator((context) => [context.user]);
+```

docs/src/pages/components/authenticator/index.page.mdx

@@ -1581,7 +1581,3 @@ These helper functions trigger transition to another `route`. Note that any inva
 
   </TabItem>
 </Tabs>
-
-<Fragment platforms={['react']}>
-  {({ platform }) => import(`./advanced/render-optimizations.${platform}.mdx`)}
-</Fragment>