chore(repo): Bump eslint-plugin-react-hooks to 7.1.1

.changeset/slimy-ways-joke.md

@@ -0,0 +1,2 @@
+---
+---

eslint.config.mjs

@@ -586,6 +586,19 @@ export default tseslint.config([
     rules: {
       ...pluginReactHooks.configs.recommended.rules,
       'react-hooks/rules-of-hooks': 'warn',
+      // Turned off while upgrading eslint-plugin-react-hooks to v7, which added these to the recommended preset.
+      // They are not meant to stay off; they will be enabled in follow-up changes.
+      'react-hooks/immutability': 'off',
+      'react-hooks/preserve-manual-memoization': 'off',
+      'react-hooks/refs': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+    },
+  },
+  {
+    name: 'repo/react-hooks/test',
+    files: TEST_FILES,
+    rules: {
+      'react-hooks/globals': 'off',
     },
   },
   ...PACKAGE_IMPORT_RESOLVER_CONFIGS,

package.json

@@ -115,7 +115,7 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-playwright": "2.10.1",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-sonarjs": "4.2.0",
     "eslint-plugin-turbo": "2.5.5",

packages/astro/src/react/hooks.ts

@@ -11,7 +11,7 @@ import type {
   UseAuthReturn,
 } from '@clerk/shared/types';
 import type { Store, StoreValue } from 'nanostores';
-import { useCallback, useSyncExternalStore } from 'react';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
 
 import { authAsyncStorage } from '#async-local-storage';
 
@@ -88,8 +88,8 @@ type UseAuth = (options?: PendingSessionOptions) => UseAuthReturn;
 export const useAuth: UseAuth = ({ treatPendingAsSignedOut } = {}) => {
   const authContext = useAuthStore();
 
-  const getToken: GetToken = useCallback(createGetToken(), []);
-  const signOut: SignOut = useCallback(createSignOut(), []);
+  const getToken: GetToken = useMemo(() => createGetToken(), []);
+  const signOut: SignOut = useMemo(() => createSignOut(), []);
 
   const { userId, orgId, orgRole, orgPermissions, factorVerificationAge, sessionClaims } = authContext;
 

packages/react/src/hooks/useAuth.ts

@@ -8,7 +8,7 @@ import type {
   SignOut,
   UseAuthReturn,
 } from '@clerk/shared/types';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 import { errorThrower } from '../errors/errorThrower';
@@ -99,8 +99,8 @@ export const useAuth = (options: UseAuthOptions = {}): UseAuthReturn => {
   const authState = useAuthBase();
 
   const isomorphicClerk = useIsomorphicClerkContext();
-  const getToken: GetToken = useCallback(createGetToken(isomorphicClerk), [isomorphicClerk]);
-  const signOut: SignOut = useCallback(createSignOut(isomorphicClerk), [isomorphicClerk]);
+  const getToken: GetToken = useMemo(() => createGetToken(isomorphicClerk), [isomorphicClerk]);
+  const signOut: SignOut = useMemo(() => createSignOut(isomorphicClerk), [isomorphicClerk]);
 
   isomorphicClerk.telemetry?.record(eventMethodCalled('useAuth', { treatPendingAsSignedOut }));
 

packages/shared/src/react/hooks/useDeepEqualMemo.ts

@@ -17,6 +17,7 @@ const useDeepEqualMemoize = <T>(value: T) => {
  * @internal
  */
 export const useDeepEqualMemo: UseDeepEqualMemo = (factory, dependencyArray) => {
+  // eslint-disable-next-line react-hooks/use-memo -- the dependency list is deep-equal memoized so it is only replaced when its contents change
   return React.useMemo(factory, useDeepEqualMemoize(dependencyArray));
 };
 

packages/shared/src/react/hooks/useOrganizationDirectorySync.shared.ts

@@ -37,6 +37,7 @@ export function useOrganizationDirectorySyncUsersCacheKeys(params: {
   args: GetDirectorySyncUsersParams;
 }) {
   const { organizationId, enterpriseConnectionId, directoryId, args } = params;
+  const argsKey = JSON.stringify(args);
   return useMemo(() => {
     return createCacheKeys({
       stablePrefix: INTERNAL_STABLE_KEYS.ORGANIZATION_DIRECTORY_SYNC_USERS_KEY,
@@ -52,7 +53,7 @@ export function useOrganizationDirectorySyncUsersCacheKeys(params: {
     });
     // The args object is intentionally serialized via the consumer to keep stability.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [organizationId, enterpriseConnectionId, directoryId, JSON.stringify(args)]);
+  }, [organizationId, enterpriseConnectionId, directoryId, argsKey]);
 }
 
 /**

packages/shared/src/react/hooks/useOrganizationEnterpriseConnectionTestRuns.shared.ts

@@ -13,6 +13,7 @@ export function useOrganizationEnterpriseConnectionTestRunsCacheKeys(params: {
   args: GetEnterpriseConnectionTestRunsParams;
 }) {
   const { organizationId, enterpriseConnectionId, args } = params;
+  const argsKey = JSON.stringify(args);
   return useMemo(() => {
     return createCacheKeys({
       stablePrefix: INTERNAL_STABLE_KEYS.ORGANIZATION_ENTERPRISE_CONNECTION_TEST_RUNS_KEY,
@@ -27,5 +28,5 @@ export function useOrganizationEnterpriseConnectionTestRunsCacheKeys(params: {
     });
     // The args object is intentionally serialized via the consumer to keep stability.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [organizationId, enterpriseConnectionId, JSON.stringify(args)]);
+  }, [organizationId, enterpriseConnectionId, argsKey]);
 }

packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx

@@ -146,6 +146,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate })
       return t(localizationKeys('apiKeys.formFieldCaption__expiration__never'));
     }
 
+    // eslint-disable-next-line react-hooks/purity -- the caption is memoized on the selected expiration, so it is computed from the time of selection
     const expirationDate = new Date(Date.now() + timeLeftInSeconds * 1000);
     return t(
       localizationKeys('apiKeys.formFieldCaption__expiration__expiresOn', {

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/index.tsx

@@ -78,6 +78,7 @@ export const ConfigureProviderStep = (): JSX.Element | null => {
         elementId={descriptors.configureSSOStep.setId('configure')}
       >
         {ConfigureSteps ? (
+          // eslint-disable-next-line react-hooks/static-components -- resolveConfigureSteps returns a module-level component, so its identity is stable across renders
           <ConfigureSteps />
         ) : (
           <>

packages/ui/src/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts

@@ -12,10 +12,11 @@ const THROTTLE_DURATION_MS = 10 * 1000;
  */
 function useRevalidateEnvironment() {
   const clerk = useClerk();
-  const lastTouchTimestamp = useRef(Date.now());
+  const lastTouchTimestamp = useRef(0);
   const [, forceUpdate] = useReducer(v => v + 1, 0);
 
   useEffect(() => {
+    lastTouchTimestamp.current = Date.now();
     const controller = new AbortController();
     window.addEventListener(
       'focus',