chore(repo,ui): Enable the React Compiler lint rules

.changeset/custom-oauth-provider-display-data.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix custom OAuth provider names and icons incorrectly carrying over from a previously loaded environment.

eslint.config.mjs

@@ -586,12 +586,6 @@ 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',
     },
   },
   {

packages/chrome-extension/eslint-suppressions.json

@@ -0,0 +1,7 @@
+{
+  "src/react/ClerkProvider.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  }
+}

packages/expo/eslint-suppressions.json

@@ -0,0 +1,12 @@
+{
+  "src/native-components/useAuthViewState.ts": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/provider/ClerkProvider.tsx": {
+    "react-hooks/refs": {
+      "count": 2
+    }
+  }
+}

packages/mosaic/eslint-suppressions.json

@@ -1,4 +1,9 @@
 {
+  "src/blocks/destructive/destructive.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
   "src/components/dialog/dialog.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -9,6 +14,11 @@
       "count": 1
     }
   },
+  "src/components/form/use-form.ts": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
   "src/components/icon/icon.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -22,13 +32,31 @@
   "src/components/profile/profile.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/features/api-keys/api-keys-table.model.ts": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
+  "src/features/organization-profile/organization-profile-members-panel/members-table-tab.model.ts": {
+    "react-hooks/refs": {
+      "count": 1
     }
   },
   "src/features/reverification/use-reverification-with-state.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     }
   },
+  "src/features/switcher/switcher.view.tsx": {
+    "react-hooks/refs": {
+      "count": 8
+    }
+  },
   "src/features/user-profile/user-profile-web3-wallets-section/user-profile-solana-wallet.model.ts": {
     "boundaries/dependencies": {
       "count": 1
@@ -39,6 +67,21 @@
       "count": 1
     }
   },
+  "src/hooks/use-debounced-async.ts": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/hooks/use-in-view.ts": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
+  "src/hooks/use-spin-delay.ts": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
   "src/localization/context.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -69,12 +112,46 @@
       "count": 2
     }
   },
+  "src/machine/use-machine.ts": {
+    "react-hooks/refs": {
+      "count": 11
+    }
+  },
+  "src/primitives/autocomplete/autocomplete-root.tsx": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
+  "src/primitives/combobox/combobox-root.tsx": {
+    "react-hooks/refs": {
+      "count": 3
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/primitives/dialog/dialog-popup.tsx": {
+    "react-hooks/refs": {
+      "count": 2
+    }
+  },
   "src/primitives/dialog/dialog-trigger.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     }
   },
+  "src/primitives/drawer/drawer-root.tsx": {
+    "react-hooks/refs": {
+      "count": 3
+    }
+  },
   "src/primitives/drawer/use-drawer-drag.ts": {
+    "react-hooks/refs": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    },
     "sonarjs/cognitive-complexity": {
       "count": 1
     }
@@ -84,6 +161,11 @@
       "count": 1
     }
   },
+  "src/primitives/file-upload/use-object-url.ts": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
   "src/primitives/hooks/use-data-table.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -92,6 +174,14 @@
   "src/primitives/hooks/use-focus-target.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 2
+    },
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
+  "src/primitives/menu/menu-root.tsx": {
+    "react-hooks/refs": {
+      "count": 1
     }
   },
   "src/primitives/menu/menu-trigger.tsx": {
@@ -104,6 +194,47 @@
       "count": 1
     }
   },
+  "src/primitives/popover/popover-root.tsx": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
+  "src/primitives/portal/portal.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/primitives/select/select-root.tsx": {
+    "react-hooks/refs": {
+      "count": 4
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/primitives/tabs/tabs-root.tsx": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
+  "src/primitives/toast/toast-provider.tsx": {
+    "react-hooks/refs": {
+      "count": 5
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/primitives/toast/toast-root.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/primitives/tooltip/tooltip-root.tsx": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  },
   "src/primitives/utils/interaction-modality.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -121,5 +252,10 @@
     "sonarjs/cognitive-complexity": {
       "count": 1
     }
+  },
+  "src/utils/feedback.tsx": {
+    "react-hooks/refs": {
+      "count": 2
+    }
   }
 }

packages/mosaic/src/primitives/combobox/combobox-root.tsx

@@ -73,6 +73,8 @@ function ComboboxInner(props: ComboboxProps) {
     ),
   );
 
+  const highlightFirstRef = useRef(false);
+
   const setOpen = useCallback(
     (nextOpen: boolean) => {
       if (!nextOpen) {
@@ -107,7 +109,6 @@ function ComboboxInner(props: ComboboxProps) {
   const popupRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const valuesByIndexRef = useRef<Map<number, string>>(new Map());
-  const highlightFirstRef = useRef(false);
   const registerOption = useCallback((index: number) => {
     if (index === 0 && highlightFirstRef.current) {
       highlightFirstRef.current = false;

packages/mosaic/src/primitives/hooks/use-focus-target.ts

@@ -34,6 +34,7 @@ export function useInitialFocus(
   floatingContext: FloatingContext,
 ): ResolvedInitialFocus {
   const elementRef = React.useRef<HTMLElement | null>(null);
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization -- this flags a real bug: openEvent is only updated through floatingContext.onOpenChange, so a controlled open after a controlled close passes initialFocus the previous interaction type
   return React.useMemo(() => {
     if (!open || initialFocus === undefined || initialFocus === true) {
       return 0;

packages/mosaic/src/primitives/select/select-root.tsx

@@ -132,7 +132,7 @@ function SelectInner(props: SelectProps) {
       }
       setOpen(next);
     },
-    [setOpen],
+    [setOpen, setTouchOpen],
   );
 
   const {

packages/mosaic/src/primitives/table/table-root.tsx

@@ -64,7 +64,7 @@ export const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(func
   const [columnCount, registerColumn] = useCounter();
   const [rowHeaderColumns, registerRowHeaderColumn] = useRegistry<number>();
   const anchorRef = React.useRef<string | null>(null);
-  const excluded = React.useMemo(() => new WeakSet<Element>(), []);
+  const [excluded] = React.useState(() => new WeakSet<Element>());
 
   const { tree } = bodyRows;
   const selectable = React.useMemo(

packages/mosaic/src/primitives/toast/toast-root.tsx

@@ -150,7 +150,8 @@ export const ToastRoot = React.forwardRef<HTMLDivElement, ToastRootProps>(functi
   const index = peers.indexOf(toast);
   const offsetY = peers.slice(0, Math.max(index, 0)).reduce((sum, t) => sum + (t.limited ? 0 : (t.height ?? 0)), 0);
 
-  const behind = frontmost !== undefined && peers.includes(frontmost) && index > peers.indexOf(frontmost);
+  const frontmostIndex = frontmost === undefined ? -1 : peers.indexOf(frontmost);
+  const behind = frontmostIndex !== -1 && index > frontmostIndex;
 
   const contextValue = useMemo<ToastRootContextValue>(
     () => ({ toast, behind, rootId, titleId, descriptionId, setTitleId, setDescriptionId }),

packages/nextjs/eslint-suppressions.json

@@ -0,0 +1,7 @@
+{
+  "src/client-boundary/hooks/usePathnameWithoutCatchAll.tsx": {
+    "react-hooks/refs": {
+      "count": 8
+    }
+  }
+}

packages/nextjs/src/pages/ClerkProvider.tsx

@@ -18,11 +18,11 @@ import { ClerkScripts } from './ClerkScripts';
 
 setErrorThrowerOptions({ packageName: PACKAGE_NAME });
 setClerkJSLoadingErrorPackageName(PACKAGE_NAME);
+ReactClerkProvider.displayName = 'ReactClerkProvider';
 
 export function ClerkProvider<TUi extends Ui = Ui>({ children, ...props }: NextClerkProviderProps<TUi>): JSX.Element {
   const { __internal_invokeMiddlewareOnAuthStateChange = true } = props;
   const { push, replace } = useRouter();
-  ReactClerkProvider.displayName = 'ReactClerkProvider';
 
   useSafeLayoutEffect(() => {
     window.__internal_onBeforeSetActive = invalidateNextRouterCache;

packages/react-router/eslint-suppressions.json

@@ -0,0 +1,7 @@
+{
+  "src/client/usePathnameWithoutSplatRouteParams.tsx": {
+    "react-hooks/refs": {
+      "count": 1
+    }
+  }
+}

packages/react-router/src/client/ReactRouterClerkProvider.tsx

@@ -17,6 +17,8 @@ const SDK_METADATA = {
   version: PACKAGE_VERSION,
 };
 
+ReactClerkProvider.displayName = 'ReactClerkProvider';
+
 /**
  * React Router hydration errors should not stop Clerk navigation from working, as the components mount only after
  * hydration is done (in the case of a hydration error, the components will simply mount after client-side hydration).
@@ -40,7 +42,6 @@ function ClerkProviderBase<TUi extends Ui = Ui>({ children, ...rest }: ClerkProv
   }, [awaitableNavigate]);
 
   const { clerkState, ...restProps } = rest;
-  ReactClerkProvider.displayName = 'ReactClerkProvider';
 
   if (typeof isSpaMode !== 'undefined' && !isSpaMode) {
     assertValidClerkState(clerkState);

packages/react/eslint-suppressions.json

@@ -0,0 +1,12 @@
+{
+  "src/contexts/ClerkProvider.tsx": {
+    "react-hooks/refs": {
+      "count": 3
+    }
+  },
+  "src/utils/useCustomElementPortal.tsx": {
+    "react-hooks/refs": {
+      "count": 6
+    }
+  }
+}