fix(clerk-react): Use derived state over local state in useAuth (#4715)

.changeset/red-cats-approve.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+`useAuth` now uses derived auth state instead of locally stored state

packages/react/src/hooks/__tests__/useAuth.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { useAuth } from '../useAuth';
+
+const TestComponent = () => {
+  const { isLoaded, isSignedIn } = useAuth();
+  return (
+    <div>
+      {isLoaded}
+      {isSignedIn}
+    </div>
+  );
+};
+
+describe('useAuth', () => {
+  test('throws an error if not wrapped in <ClerkProvider>', () => {
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrow(
+      '@clerk/clerk-react: useAuth can only be used within the <ClerkProvider /> component. Learn more: https://clerk.com/docs/components/clerk-provider',
+    );
+  });
+});

packages/react/src/hooks/useAuth.ts

@@ -1,6 +1,6 @@
 import { createCheckAuthorization } from '@clerk/shared/authorization';
 import type { CheckAuthorizationWithCustomPermissions, GetToken, SignOut, UseAuthReturn } from '@clerk/types';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 
 import { useAuthContext } from '../contexts/AuthContext';
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
@@ -50,24 +50,14 @@ type UseAuth = (initialAuthState?: any) => UseAuthReturn;
 export const useAuth: UseAuth = (initialAuthState = {}) => {
   useAssertWrappedByClerkProvider('useAuth');
 
-  const authContext = useAuthContext();
+  const authContextFromHook = useAuthContext();
+  let authContext = authContextFromHook;
 
-  const [authState, setAuthState] = useState(() => {
-    // This indicates the authContext is not available, and so we fallback to the provided initialState
-    if (authContext.sessionId === undefined && authContext.userId === undefined) {
-      return initialAuthState ?? {};
-    }
-    return authContext;
-  });
-
-  useEffect(() => {
-    if (authContext.sessionId === undefined && authContext.userId === undefined) {
-      return;
-    }
-    setAuthState(authContext);
-  }, [authContext]);
+  if (authContext.sessionId === undefined && authContext.userId === undefined) {
+    authContext = initialAuthState != null ? initialAuthState : {};
+  }
 
-  const { sessionId, userId, actor, orgId, orgRole, orgSlug, orgPermissions, factorVerificationAge } = authState;
+  const { sessionId, userId, actor, orgId, orgRole, orgSlug, orgPermissions, factorVerificationAge } = authContext;
   const isomorphicClerk = useIsomorphicClerkContext();
 
   const getToken: GetToken = useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);