compiler: consider startTransition from useTransition as non reactive

compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts

@@ -17,6 +17,7 @@ import {
   BuiltInUseReducerId,
   BuiltInUseRefId,
   BuiltInUseStateId,
+  BuiltInUseTransitionId,
   ShapeRegistry,
   addFunction,
   addHook,
@@ -324,6 +325,17 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       returnValueKind: ValueKind.Frozen,
     }),
   ],
+  [
+    "useTransition",
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: { kind: "Object", shapeId: BuiltInUseTransitionId },
+      calleeEffect: Effect.Read,
+      hookKind: "useTransition",
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
   [
     "useEffect",
     addHook(

compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts

@@ -1563,8 +1563,19 @@ export function isDispatcherType(id: Identifier): boolean {
   return id.type.kind === "Function" && id.type.shapeId === "BuiltInDispatch";
 }
 
+export function isStartTransitionType(id: Identifier): boolean {
+  return (
+    id.type.kind === "Function" && id.type.shapeId === "BuiltInStartTransition"
+  );
+}
+
 export function isStableType(id: Identifier): boolean {
-  return isSetStateType(id) || isSetActionStateType(id) || isDispatcherType(id);
+  return (
+    isSetStateType(id) ||
+    isSetActionStateType(id) ||
+    isDispatcherType(id) ||
+    isStartTransitionType(id)
+  );
 }
 
 export function isUseEffectHookType(id: Identifier): boolean {

compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts

@@ -125,6 +125,7 @@ export type HookKind =
   | "useLayoutEffect"
   | "useMemo"
   | "useCallback"
+  | "useTransition"
   | "Custom";
 
 /*
@@ -207,6 +208,8 @@ export const BuiltInUseInsertionEffectHookId = "BuiltInUseInsertionEffectHook";
 export const BuiltInUseOperatorId = "BuiltInUseOperator";
 export const BuiltInUseReducerId = "BuiltInUseReducer";
 export const BuiltInDispatchId = "BuiltInDispatch";
+export const BuiltInUseTransitionId = "BuiltInUseTransition";
+export const BuiltInStartTransitionId = "BuiltInStartTransition";
 
 // ShapeRegistry with default definitions for built-ins.
 export const BUILTIN_SHAPES: ShapeRegistry = new Map();
@@ -445,6 +448,25 @@ addObject(BUILTIN_SHAPES, BuiltInRefValueId, [
   ["*", { kind: "Object", shapeId: BuiltInRefValueId }],
 ]);
 
+addObject(BUILTIN_SHAPES, BuiltInUseTransitionId, [
+  ["0", { kind: "Poly" }],
+  [
+    "1",
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInStartTransitionId
+    ),
+  ],
+]);
+
 addObject(BUILTIN_SHAPES, BuiltInMixedReadonlyId, [
   [
     "toString",

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useTransition-startTransition-considered-as-non-reactive.expect.md

@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import { useTransition, useState } from "react";
+
+function Component() {
+  const [isPending, startTransition] = useTransition();
+  const [state, setState] = useState(1);
+  return (
+    <div onClick={() => startTransition(() => setState((prev) => prev + 1))}>
+      {isPending ? "pending" : state}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useTransition, useState } from "react";
+
+function Component() {
+  const $ = _c(3);
+  const [isPending, startTransition] = useTransition();
+  const [state, setState] = useState(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => startTransition(() => setState((prev) => prev + 1));
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const t1 = isPending ? "pending" : state;
+  let t2;
+  if ($[1] !== t1) {
+    t2 = <div onClick={t0}>{t1}</div>;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+### Eval output
+(kind: ok) <div>1</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useTransition-startTransition-considered-as-non-reactive.js

@@ -0,0 +1,16 @@
+import { useTransition, useState } from "react";
+
+function Component() {
+  const [isPending, startTransition] = useTransition();
+  const [state, setState] = useState(1);
+  return (
+    <div onClick={() => startTransition(() => setState((prev) => prev + 1))}>
+      {isPending ? "pending" : state}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};