chore: adopt stable React Compiler lint rules (#4737)

Author: carderne

.oxlintrc.json

@@ -70,6 +70,19 @@
     "react/require-render-return": "error",
     "react/style-prop-object": "error",
     "react/void-dom-elements-no-children": "error",
+    "react/error-boundaries": "off",
+    "react/globals": "off",
+    "react/immutability": "off",
+    "react/incompatible-library": "off",
+    "react/preserve-manual-memoization": "off",
+    "react/purity": "off",
+    "react/refs": "off",
+    "react/set-state-in-effect": "off",
+    "react/set-state-in-render": "off",
+    "react/static-components": "off",
+    "react/unsupported-syntax": "off",
+    "react/use-memo": "off",
+    "react/void-use-memo": "off",
     "react/checked-requires-onchange-or-readonly": "error",
     "react/forward-ref-uses-ref": "error",
     "react/iframe-missing-sandbox": "error",
@@ -124,7 +137,22 @@
         "react/button-has-type": "error",
         "react/jsx-no-useless-fragment": "error",
         "react/no-unstable-nested-components": "error",
-        "react/react-compiler": "error",
+        "react/error-boundaries": "error",
+        "react/globals": "error",
+        "react/hooks": "error",
+        "react/immutability": "error",
+        "react/incompatible-library": "error",
+        "react/memo-dependencies": "error",
+        "react/no-deriving-state-in-effects": "error",
+        "react/preserve-manual-memoization": "error",
+        "react/purity": "error",
+        "react/refs": "error",
+        "react/set-state-in-effect": "error",
+        "react/set-state-in-render": "error",
+        "react/static-components": "error",
+        "react/unsupported-syntax": "error",
+        "react/use-memo": "error",
+        "react/void-use-memo": "error",
         "react/rules-of-hooks": "error",
         "trigger-runops/no-control-plane-run-graph-access": "error",
         "trigger-runops/no-control-plane-in-runops-slot": "error"
@@ -136,6 +164,12 @@
         "react/rules-of-hooks": "error"
       }
     },
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "rules": {
+        "no-redeclare": "off"
+      }
+    },
     {
       "files": ["apps/webapp/app/**/*.test.ts", "apps/webapp/app/**/*.test.tsx"],
       "rules": {

apps/webapp/app/components/AskAI.tsx

@@ -273,7 +273,7 @@ function ChatMessages({
   // Reset feedback state when conversation is reset
   useEffect(() => {
     if (conversation.length === 0) {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setFeedbackGivenForQAs(new Set());
     }
   }, [conversation.length]);

apps/webapp/app/components/DevPresence.tsx

@@ -55,7 +55,7 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
   useEffect(() => {
     // If disabled or no events
     if (!enabled || streamedEvents === null) {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setIsConnected(undefined);
       return;
     }
@@ -114,7 +114,7 @@ export function useCrossEngineIsConnected({
 
   useEffect(() => {
     if (project.engine === "V2") {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setCrossEngineIsConnected(isConnected);
       return;
     }

apps/webapp/app/components/Feedback.tsx

@@ -76,7 +76,7 @@ export function Feedback({
   useEffect(() => {
     const open = searchParams.get("feedbackPanel");
     if (open) {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setType(open as FeedbackType);
       setOpen(true);
       // Clone instead of mutating in place

apps/webapp/app/components/LoginPageLayout.tsx

@@ -47,7 +47,7 @@ export function LoginPageLayout({
   const [randomQuote, setRandomQuote] = useState<QuoteType | null>(null);
   useEffect(() => {
     const randomIndex = Math.floor(Math.random() * quotes.length);
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setRandomQuote(quotes[randomIndex]);
   }, []);
 

apps/webapp/app/components/TriggerRotatingLogo.tsx

@@ -25,7 +25,7 @@ export function TriggerRotatingLogo() {
   useEffect(() => {
     // Already registered from a previous render
     if (customElements.get("spline-viewer")) {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setIsSplineReady(true);
       return;
     }

apps/webapp/app/components/admin/FeatureFlagsDialog.tsx

@@ -56,7 +56,7 @@ export function FeatureFlagsDialog({
   const saveFetcher = useFetcher<ActionData>();
   const loadFeatureFlags = loadFetcher.load;
   const onOpenChangeRef = useRef(onOpenChange);
-  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
+  // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
   onOpenChangeRef.current = onOpenChange;
 
   const [overrides, setOverrides] = useState<Record<string, unknown>>({});
@@ -68,7 +68,7 @@ export function FeatureFlagsDialog({
 
   useEffect(() => {
     if (open && orgId) {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setSaveError(null);
       setOverrides({});
       setInitialOverrides({});
@@ -79,7 +79,7 @@ export function FeatureFlagsDialog({
   useEffect(() => {
     if (loadFetcher.data) {
       const loaded = loadFetcher.data.orgFlags ?? {};
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setOverrides({ ...loaded });
       setInitialOverrides({ ...loaded });
     }
@@ -89,7 +89,7 @@ export function FeatureFlagsDialog({
     if (saveFetcher.data?.success) {
       onOpenChangeRef.current(false);
     } else if (saveFetcher.data?.error) {
-      // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+      // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
       setSaveError(saveFetcher.data.error);
     }
   }, [saveFetcher.data]);

apps/webapp/app/components/admin/backOffice/MaxProjectsSection.tsx

@@ -34,12 +34,12 @@ export function MaxProjectsSection({
   const [value, setValue] = useState(String(maximumProjectCount));
 
   useEffect(() => {
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (hasFieldErrors) setIsEditing(true);
   }, [hasFieldErrors]);
 
   useEffect(() => {
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (savedJustNow && !hasFieldErrors) setIsEditing(false);
   }, [savedJustNow, hasFieldErrors]);
 

apps/webapp/app/components/admin/backOffice/RateLimitSection.tsx

@@ -65,12 +65,12 @@ export function RateLimitSection({
   const [maxTokens, setMaxTokens] = useState(current ? String(current.maxTokens) : "");
 
   useEffect(() => {
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (hasFieldErrors) setIsEditing(true);
   }, [hasFieldErrors]);
 
   useEffect(() => {
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     if (savedJustNow && !hasFieldErrors) setIsEditing(false);
   }, [savedJustNow, hasFieldErrors]);
 

apps/webapp/app/components/billing/BillingAlertsSection.tsx

@@ -119,7 +119,7 @@ export function BillingAlertsSection({
       return;
     }
 
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setShowResetBanner(true);
 
     if (searchParams.get("alertsReset") !== "1") {
@@ -141,12 +141,12 @@ export function BillingAlertsSection({
   );
   const maxAlerts = isPercentageMode ? MAX_PERCENTAGE_ALERTS : MAX_ABSOLUTE_ALERTS;
 
-  /* oxlint-disable react/react-compiler -- Stable derived thresholds prevent the synchronization effect from resetting local edits. */
+  /* oxlint-disable react/preserve-manual-memoization -- Stable derived thresholds prevent the synchronization effect from resetting local edits. */
   const savedThresholds = useMemo(
     () => storedAlertsToThresholds(alerts, billingLimitMode, effectiveLimitCents, planLimitCents),
     [alerts, billingLimitMode, effectiveLimitCents, planLimitCents]
   );
-  /* oxlint-enable react/react-compiler */
+  /* oxlint-enable react/preserve-manual-memoization */
   const savedEmails = useMemo(() => alerts.emails, [alerts.emails]);
   const hasLegacySpikes = hasLegacySpikeAlertLevels(
     alerts,
@@ -190,7 +190,7 @@ export function BillingAlertsSection({
 
   useEffect(() => {
     nextThresholdIdRef.current = savedThresholds.length;
-    // oxlint-disable-next-line react/react-compiler -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
     setThresholdRows(toThresholdRows(savedThresholds));
     setEmailValues(savedEmails.length > 0 ? [...savedEmails, ""] : [""]);
   }, [savedThresholds, savedEmails]);